html - 自动填充垂直间隙的响应式柔性版面？

抱歉，我什至不知道如何用适当的标题来描述我的问题，或者不知道这个问题是否愚蠢。但这是我的问题：我有一些网格形状，例如1x1、2x1、2x2和1x2框，它们可能会随机出现而没有特定的顺序，我希望这些网格在我的页面上平铺。
我有的：

<html>
    <style>
        .container
        {
            display:flex;
            flex-direction:row;
            flex-wrap: wrap;
        }
        .b11
        {
            background-color:#1b6d85;
            width:100px;
            height:100px;
            border: 1px solid #fff;
        }
        .b21
        {
            background-color:#8a6d3b;
            width:200px;
            height:100px;
            border: 1px solid #fff;
        }
        .b22
        {
            background-color:#2aabd2;
            width:200px;
            height:200px;
            border: 1px solid #fff;
        }
    </style>
    <body>
        <div class="container">
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b22"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
        </div>
    </body>
</html>

结果是（在任意屏幕宽度下，例如760px）：

由于项目之间有一个2x2的盒子，所以整行都留有空隙。是否可以将这些盒子尽可能紧密地放置（例如从左到右，从上到下堆叠在一起）而没有任何行距？

最佳答案

我已经尝试过您的代码，并且有解决方案。您需要使用flex：1;因为您所有的物品都会对齐。例如：

.container
        {
            display:flex;
            flex-direction:row;
            flex-wrap: wrap;
        }
        .container > * {
            flex: 1;
        }
        .b11
        {
            background-color:#1b6d85;
            width:100px;
            height:100px;
            border: 1px solid #fff;
        }
        .container .b21 {
            flex: 2;
        }
        .b21
        {
            background-color:#8a6d3b;
            width:200px;
            height:100px;
            border: 1px solid #fff;
        }
        .b22
        {
            background-color:#2aabd2;
            width:200px;
            height:200px;
            border: 1px solid #fff;
        }

<html>
<head></head>
    <body>
        <div class="container">
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b22"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
        </div>
    </body>
</html>

你可以试试看

关于html - 自动填充垂直间隙的响应式柔性版面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54192779/