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

方案一：

  <style>

        *{margin: 0; padding: 0}

        .wrapper{

            display: flex;

            flex-wrap: wrap;

            width: 900px;

            border:1px solid black;

            margin: 0 auto;

        }

        .item{

            width: 25%;

            height: 200px;

            border:1px solid red;

            margin-left: calc((900px - 3*25%)/4);

            //( 总宽度 减去 子节点个数 乘以 子节点宽度 ) 平均分配到（子节点个数+1）个区域

            margin-bottom:10px;

          }

    </style>

<div class="wrapper">

    <div class="item"> </div>

    <div class="item"> </div>

    <div class="item"> </div>

    <div class="item"> </div>

    <div class="item"> </div>

</div>

方案二：事先就计算好具体值给 margin-left