FlexBox 行间距

问题背景

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

 

解决办法

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

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

代码如下:

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.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; }

　 

结构

?

1 2 3 4 5 6 7 8 9 10

<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