flex 这样的布局怎么做?

Question

如图

        .wrapper{

            display: flex;

            justify-content: space-around;

            flex-wrap: wrap;

            width: 900px;

            margin: 0 auto;

        }

wrapper space-around 在这种情况下出现 上面3个正常的等分, 下面剩下2个就表现的不太好, 还是会等分留白, 而不是 左对齐的去等分.

目前我的做法是填充空白的子元素, 通过js去判断需要动态填充几个空白子元素.

不知道有没有css的解决方案

Answer 1

方案一：&nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; *{margin: 0; padding: 0}&nbsp; &nbsp; &nbsp; &nbsp; .wrapper{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 900px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: calc((900px - 3*25%)/4);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //( 总宽度 减去 子节点个数 乘以 子节点宽度 ) 平均分配到（子节点个数+1）个区域&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style><div class="wrapper">&nbsp; &nbsp; <div class="item"> </div>&nbsp; &nbsp; <div class="item"> </div>&nbsp; &nbsp; <div class="item"> </div>&nbsp; &nbsp; <div class="item"> </div>&nbsp; &nbsp; <div class="item"> </div></div>方案二：事先就计算好具体值给 margin-left