死去的回忆涌上心头(flex)

被死去的回忆疯狂拷打

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 行内元素也可以使用Flex布局。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

                <li>
                  分拣中心(个)
                  <div class="qq">1</div>
                </li>
                <li>营业部(个)
                  <div class="ww">4</div>
                </li>
                <li>司机人数(个)
                  <div class="ee">48</div>
                </li>
                <li>快递员个数(个)
                  <div class="rr">64</div>
                </li>
              </ul>

.con{
display: flex;
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.con li{
width: 49.5%;
height: 49%;
list-style: none;

}
.qq,.ww,.ee,.rr{
font-size: 32px;
font-weight: 700;
color: #e15536;
cursor: pointer;
padding-top: 5px;
}}


浅记一下flex 均分4等分