從右到左，從上到下的砌體布局與純 CSS？

Question

純 CSS是否可以實現這樣的目標？

正如你所看到的，它就像一個從上到下的常規砌體布局，但順序是相反的。

Answer 1

您可以使用flexbox來實現此目的，如下例所示：

HTML

<div class='box'>
    <div class="small box-item">1</div>
    <div class="big box-item">2</div>
    <div class="big box-item">3</div>
    <div class="medium box-item">4</div>
    <div class="small box-item">5</div>
    <div class="medium box-item">6</div>
</div>

CSS

        .box-item {
            margin: 0;
            border: 5px solid white;
            background-color: violet;
        }

        .small { height: 10vh; }
        .medium { height: 30vh; }
        .big { height: 60vh; }

        .box {
            margin: 0;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap-reverse;
            max-height: 100vh;
        }

結果將是這樣的：

另請參見Flexbox 列方向從右到左