Question

如何用HTMLflex布局写出两行列表

Answer 1

<div style="display: flex;flex-wrap: wrap;">
<div style="width:50%;height: 100px;background-color: #000000;">第一列1</div>
<div style="width:50%;height: 100px;background-color: blue;">第一列2</div>
<div style="width:50%;height: 100px;background-color: red;">第二列1</div>
<div style="width:50%;height: 100px;background-color: yellow;">第二列2</div>
</div>

我没有考虑兼容性问题，自行加上前缀就可以。这里最主要注意两点：

1. 在外层要加上flex-wrap: wrap;非常重要，这句话的意思就是可以换行；
   

2. 内层一定要给其设置宽度。这样才能有效换行，否则全堆在一行里了。