如何将HTML元素浮动在小块中，并且当一个块扩展时，其他块应正确对齐

Question

我创建了一个具有50px高度和50px宽度的DIV列表，该宽度漂浮在Main Div中。

但是，当我将一个Div扩展到100px高度时，下面的Div将移至下一个位置，在扩展的Div。

Answer 1

使用 flexbox 属性，在下面找到相关代码

#container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
section:nth-child(2) { height: calc(100px + 20px); /* double height + margin */ }
section:nth-child(8) { height: calc(100px + 20px); /* double height + margin */ }
section:nth-child(13) { height: calc(100px + 20px); /* double height + margin */ }
section:nth-child(1)  { order: 1; }
section:nth-child(2)  { order: 5; }
section:nth-child(3)  { order: 9; }
section:nth-child(4)  { order: 13; }
section:nth-child(5)  { order: 15; }
section:nth-child(6)  { order: 18; }
section:nth-child(7)  { order: 2; }
section:nth-child(8)  { order: 13; }
section:nth-child(9)  { order: 14; }
section:nth-child(10) { order: 16; }
section:nth-child(11) { order: 3; }
section:nth-child(12) { order: 7; }
section:nth-child(13) { order: 11; }
section:nth-child(14) { order: 15; }
section:nth-child(15) { order: 19; }
section:nth-child(16) { order: 4; }
section:nth-child(17) { order: 8; }
section:nth-child(18) { order: 12; }
section:nth-child(19) { order: 16; }
section:nth-child(20) { order: 20; }
/* decorative styles */
#container {
    border: 1px solid #ccc;
    background-color: lightyellow;
    height: 300px;
    width: 500px;
}
.box {
    border: 1px solid #ccc;
    background-color: lightgreen;
    height: 50px;
    width: 50px;
    margin: 10px;
    
    /* center align numbers */
    display: flex;
    justify-content: center;
    align-items: center;
}

<article id="container">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
    <section class="box">4</section>
    <section class="box">5</section>
    <section class="box">6</section>
    <section class="box">7</section>
    <section class="box">8</section>
    <section class="box">9</section>
    <section class="box">10</section>
    <section class="box">11</section>
    <section class="box">12</section>
    <section class="box">13</section>
    <section class="box">14</section>
    <section class="box">15</section>
    <section class="box">16</section>
    <section class="box">17</section>
    <section class="box">18</section>
    <section class="box">19</section>
    <section class="box">20</section>
</div>