與Flexbox列等距垂直間距

Question

我在CSS中掙扎讓我的flexbox顯示垂直等間距的列中的項目，因此列的每一行之間均勻間隔。

html, body, 
 
.flex-container { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Droid Sans', sans-serif; 
 
    overflow: hidden; 
 
    background-color: #2b2b2b; 
 
} 
 

 
.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: column; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: #2b2b2b; 
 
} 
 

 
img { 
 
    border-radius: 50%; 
 
    max-width: 400px; 
 
    max-height: auto; 
 
} 
 

 
.home-flex { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
}

<div class="flex-container"> 
 
    <h1>Name</h1> 
 
    <img src="image.png"> 
 
    <div class="home-flex"> 
 
    <a title="twitter" href="#"> 
 
     <i>twitter</i> 
 
    </a> 
 
    <a title="github" href="#"> 
 
     <i>github</i> 
 
    </a> 
 
    <a title="stackoverflow" href="#"> 
 
     <i>stackoverflow</i> 
 
    </a> 
 
    <a title="linkedin" href="#"> 
 
     <i>linkedin</i> 
 
    </a> 
 
    <a title="facebook" href="#"> 
 
     <i>facebook</i> 
 
    </a> 
 
    </div> 
 
</div>

我可以輕鬆搞定的水平間距（見。家裏-FLEX），但我不能似乎得到justify-content: space-around;或justify-content: space-between;垂直工作。謝謝

Answer 1

您只需要將flex容器中的每個根元素的柔性長度指定爲1.這將均勻地將它們間隔開來，因爲它們嘗試在柔度方向上佔用相當量的空間。

html, body, 
 
.flex-container { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Droid Sans', sans-serif; 
 
    overflow: hidden; 
 
    
 
} 
 

 
.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.flex-container h1 { 
 
    flex: 1; 
 
} 
 

 
.flex-container img { 
 
    border-radius: 50%; 
 
    max-width: 400px; 
 
    max-height: auto; 
 
    flex: 1; 
 
} 
 

 
.home-flex { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    flex: 1; 
 
}

<div class="flex-container"> 
 
    <h1>Name</h1> 
 
    <img src="image.png"> 
 
    <div class="home-flex"> 
 
    <a title="twitter" href="#"> 
 
     <i>twitter</i> 
 
    </a> 
 
    <a title="github" href="#"> 
 
     <i>github</i> 
 
    </a> 
 
    <a title="stackoverflow" href="#"> 
 
     <i>stackoverflow</i> 
 
    </a> 
 
    <a title="linkedin" href="#"> 
 
     <i>linkedin</i> 
 
    </a> 
 
    <a title="facebook" href="#"> 
 
     <i>facebook</i> 
 
    </a> 
 
    </div> 
 
</div>