Question

对不起，我什至不知道如何用标题的适当术语来描述我的问题，或者不知道这个问题是否愚蠢。但这是我的问题：我有一些网格形状，如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的框，因此整个行都留有间隙。是否可以通过任何方式将这些盒子尽可能紧密地放置（例如从左到右，从上到下堆叠在一起）而没有任何行距？

Answer 1

我已经尝试过您的代码，并且有解决方案。您需要使用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>

您可以尝试这个。

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

1 个答案: