从右到左，从上到下的砌体布局与纯 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 列方向从右到左