問題背景
在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