flexbox與空間之間，等高，垂直和水平中心項目

Question

我嘗試使用以下想法構建帶有flexbox的菜單： 項目之間的空間，高度相等，居中文本（水平和垂直）。

ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
li { 
 
    width: 32.25%; 
 
    align-items: center; 
 
} 
 

 
span { 
 
    text-align: center; 
 
    display: block; 
 
    height: 100%; 
 
}

<ul> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item - much much much much much much much much much much more longer</span></li> 
 
</ul>

我應該怎麼做才能得到正確的菜單，我應該怎麼辦居中文字水平和（！）垂直？

銅

沃爾克 menu with flexbox

Answer 1

添加​​到ul。

的CSS 對齊項屬性定義了瀏覽器之間，並在其容器的橫繞軸彎曲的物品如何分配空間。這意味着它的工作原理類似於正當內容，但是在垂直方向。

欲瞭解更多信息，請MDN article

參考代碼：

ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
li { 
 
    width: 32.25%; 
 
    align-items: center; 
 
} 
 

 
span { 
 
    text-align: center; 
 
    display: block; 
 
    height: 100%; 
 
}

<ul> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item - much much much much much much much much much much more longer</span></li> 
 
</ul>

Answer 2

充分利用li柔性的父母也。無需設置高度。 li將全都是相同的高度（最高），並且display:flex您可以根據需要調整li的內容。

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li { 
 
    display: flex; 
 
    flex: 0 0 32.5%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid grey; 
 
} 
 

 
span { 
 
    text-align: center; 
 
}

<ul> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item</span></li> 
 
    <li><span>Item - much much much much much much much much much much more longer</span></li> 
 
</ul>