FlexBox 行间距

问题背景

在Flex布局方式下, 父容器约定是换行的方式, 不足以容纳一行子元素的时候, 会单独进行折行, 那么折行的行间距如何处理呢?

 

解决办法

通过在子Item上面设置margin-top可以模拟出折行之后, 下面一行距离上面一行的间距;

但是这样操作之后, 会导致第一行和父容器的间距增大, 通过设置父容器的margin-top为相同的负值, 可以抵消这个间距

代码如下:

 

.flex-container {
  width: 800px;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  margin-top: -25px;
  margin-bottom: -25px;
  border-style: solid;
  border-color: blue;
  border-width: 1px;
}

.flex-item {
  background: tomato;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border-style: solid;
  border-color: yellow;
  border-width:1px;
  margin-top: 25px;
  // margin-bottom: 25px;
  margin-left: 0px;
}

　 

结构

<div>
  <div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>
</div>

 

效果

 

模拟测试代码

https://codepen.io/liqiushui/pen/yLXqQLZ