消除flex

先看使用flex-wrap: wrap正常出现的效果

案例是在微信小程序中举例的，若用H5网页，把view 和 text换成对应的 div与span标签

//html<view class="box">    <view class="chunk color1">        用户名        <text>            Tomo        </text>    </view>    <view class="chunk color2">        id        <te搞笑祝福语xt>            11000        </text>  开头结尾摘抄大全  </view>    <view class="chunk color3">        粉丝量        <text&g川菜菜谱大全t;            8888        </text>    </view></view>

//css/* pages/index.wxss */.box {    height: 400px;    border: blue 1px solid;    display: flex;    justify-content: space-around;   flex-wrap: wrap;}.chunk {    width: 200px;    height: 100px;    display: flex;    flex-direction: column;  税务师报名入口  justify-content: center;    align-items: center;}.color1 {    background-color: #ff70ff;}.color2 {    background-color: aqua;}.color3 {    background-color: blue;}

消除水平产生的间距 =>解决方案

个人认为：这个是flex的一个特性，每个子元素的高度是100px,flex-wrap换行后就是两个子元素的高度为200px，而给的父元素box高度是400px长津湖纪录片, 当父元素有富余的高度时，flex就会参数这种效果。所以给父元素200px的高度即可消除。

本文地址：https://blog.csdn.net/A_9888/article/details/107263777