Flex布局时，并且设置warp，父层宽度如何自适应？

Question

.flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid green;
}

.item{
  margin-bottom: 5px;
  margin-right: 5px;
  background: pink;
  width: 70px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

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

换行后，父层DIV 如何宽度不留白

Answer 1

这个或许可以帮你：https://github.com/shaozj/blo...

Answer 2

使用flex的：justify-content:space-between;
或参考下这个： https://codepen.io/danield770...

Answer 3

父元素添加 width: max-content