问题背景
在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