Flexbox：如何为多行添加边距/垂直间距？ [英] Flexbox: how to add margin / vertical spacing for the case there is more than one row?

问题描述

这里是codepen

我想为行1和行之间的元素添加垂直间距 2.另外，只能在第1行和第2行之间，第2行和第3行之间。

flex项目是随机的，所以每个项目的数量和大小都是动态。

我不能为所有的边缘添加边距，因为如果没有第二行的话，会破坏布局。

HTML

 < div class =flexContainer> 
< div class =flexItem> a a a aaaaaaa a ax< / div> 
< div class =flexItem> bbbx< / div> 
< div class =flexItem> c c c c cx< / div> 
< div class =flexItem>注意：随机数量的弹性项目< / div> 
< div class =flexItem> amount can very ...< / div> 
< / div> 
 
< br />< br />< br /> 
< div class =flexContainer> 
< div class =flexItem> a a a aaaaaaa a ax< / div> 
< div class =flexItem> bbbx< / div> 
< div class =flexItem> c c c c cx< / div> 
< / div> 
  

CSS

  .flexContainer {
 background-color：salmon; 
 display：flex; 
 flex-direction：row; 
 width：300px; 
 flex-wrap：wrap; 
} 
 
 .flexItem {
 background-color：lightblue; 
保证金：5px; b 
 
 
 
浏览器支持：只支持最新的尖端浏览器。
 
 
 $ b $ ul 
 
添加一些   > margin-bottom 添加到第一个和最后一个 .flex-item  s。
 
 
以 align-items：flex-start 或 align-self：flex-start 。
 
 
为了抵消最后一页的余量，在 .flexContainer 中添加一个负值 margin-bottom  。
 
将 .flexContainer 放置在一个包装中，其中 overflow：hidden  。   
       snippet-code> 
  .wrapper {overflow：hidden;}。flexContainer {background-color：salmon;显示：flex; flex-flow：排行;宽度：300px; margin-bottom：-20px; / * 25-20 = 5 * /}。flexItem {background-color：lightblue; margin：5px; align-self：flex-start;}。flexItem：first-child，.flexItem：last-child {margin-bottom：25px;}  
 < div class =wrapper> < div class =flexContainer> < div class =flexItem> a a aaaaaaa a ax< / div> < div class =flexItem> bbbx< / div> < div class =flexItem> c c c c c cx< / div> < div class =flexItem>备注：弹性项目的随机数量< / div> < div class =flexItem> amount can very ...< / div> < / div>< / div>< br />< br />< div class =wrapper> < div class =flexContainer> < div class =flexItem> a a aaaaaaa a ax< / div> < div class =flexItem> bbbx< / div> < div class =flexItem> c c c c c cx< / div> < / div>< / div>  
 

here is the codepen

I want to add vertical spacing ONLY to elements between line 1 and line 2. Alternatively, only to between line 1 and line 2, and line 2 and line 3.

The flex items are random, so the amount, size of each, is dynamic.

I cannot add margins to all, because that would ruin the layout in case there is no second row at all.

HTML

<div class="flexContainer">
  <div class="flexItem">a a a aaaaaaa a ax</div>
  <div class="flexItem">bbbx</div>
  <div class="flexItem">c c  c c c cx</div>
  <div class="flexItem">note: random amount of flex items</div>
    <div class="flexItem">amount can very...</div>
</div>

<br/><br/><br/>
<div class="flexContainer">
  <div class="flexItem">a a a aaaaaaa a ax</div>
  <div class="flexItem">bbbx</div>
  <div class="flexItem">c c  c c c cx</div>
</div>

CSS

.flexContainer{
  background-color: salmon;
  display: flex;
  flex-direction: row;
  width: 300px;
  flex-wrap: wrap;
}

.flexItem{
  background-color: lightblue;
  margin: 5px;
}

Browsersupport: only newest cutting edge browsers are supported.

解决方案

You can

• Add some margin-bottom to the first and last .flex-items.
• Align all flex items to top with align-items: flex-start or align-self: flex-start.
• Add a negative margin-bottom to .flexContainer in order to counteract the margin after the last line.
• Place the .flexContainer inside a wrapper with overflow: hidden.

.wrapper {
  overflow: hidden;
}
.flexContainer {
  background-color: salmon;
  display: flex;
  flex-flow: row wrap;
  width: 300px;
  margin-bottom: -20px; /* 25-20 = 5 */
}
.flexItem {
  background-color: lightblue;
  margin: 5px;
  align-self: flex-start;
}
.flexItem:first-child, .flexItem:last-child {
  margin-bottom: 25px;
}

<div class="wrapper">
  <div class="flexContainer">
    <div class="flexItem">a a a aaaaaaa a ax</div>
    <div class="flexItem">bbbx</div>
    <div class="flexItem">c c  c c c cx</div>
    <div class="flexItem">note: random amount of flex items</div>
    <div class="flexItem">amount can very...</div>
  </div>
</div>
<br/><br/>
<div class="wrapper">
  <div class="flexContainer">
    <div class="flexItem">a a a aaaaaaa a ax</div>
    <div class="flexItem">bbbx</div>
    <div class="flexItem">c c  c c c cx</div>
  </div>
</div>

这篇关于Flexbox：如何为多行添加边距/垂直间距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！