[CSS] flex布局实现每行固定个数，超出换行，并根据屏幕分辨率自适应布局

实现目标

使用flex布局，在每一行上，需要固定X个元素，超过的元素做换行处理。

实现

假设如下Html代码：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

实现一行显示child子div，CSS如下：

<style>
   .parent {
     width: 100%;
     height: 150px;
     display: flex;
     flex-flow: row wrap;
     align-content: flex-start;
   }

   .child {
     box-sizing: border-box;
     background-color: white;
     flex: 0 0 33%;
     height: 50px;
     border: 1px solid red;
   }
</style>

.child类上，flex: 0 0 33%，相当于100%的宽度，每行多少个元素，就用100%去除以个数，得出来的数值。

效果如图所示（可以根据屏幕分辨率改变宽度，如果不够宽度，可以自动调整个数。）：