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