如何将html元素浮动在小块中，当一个块展开时，其他块应该正确对齐？

我已经创建了一个高度为50px、宽度为50px的div列表，这些div在主div中浮动

---

但是，当我仅将一个div扩展到100px高度时，下面的div将移动到下一个位置，在扩展的div之前有一个空格。

使用flexbox属性，找到下面与示例相关的代码

#容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整内容：灵活启动；
调整项目：灵活启动；
}
节：第n个子（2）{高度：计算（100px+20px）；/*双倍高度+边距*/}
节：第n个子（8）{高度：计算（100px+20px）；/*双倍高度+边距*/}
节：第n个子（13）{高度：计算（100px+20px）；/*双倍高度+边距*/}
节：第n个子（1）{顺序：1；}
节：第n个子（2）{顺序：5；}
第n子节（3）{顺序：9；}
节：第n子（4）{顺序：13；}
第n节第（5）项{顺序：15；}
第n节第（6）项{顺序：18；}
节：第n个子（7）{顺序：2；}
第n节第（8）项{顺序：13；}
第n节第（9）项{顺序：14；}
节：第n子（10）{顺序：16；}
节：第n子（11）{顺序：3；}
节：第n子（12）{顺序：7；}
第n节儿童（13）{顺序：11；}
第N节儿童（14）{顺序：15；}
第n节儿童（15）{顺序：19；}
节：第n子（16）{顺序：4；}
第n节儿童（17）{顺序：8；}
第n节儿童（18）{顺序：12；}
第n节儿童（19）{顺序：16；}
第n节第（20）项{顺序：20；}
/*装饰风格*/
#容器{
边框：1px实心#ccc；
背景颜色：浅黄色；
高度：300px；
宽度：500px；
}
.盒子{
边框：1px实心#ccc；
背景颜色：浅绿色；
高度：50px；
宽度：50px；
利润率：10px；
/*居中对齐数字*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20

使用

flexbox

属性。