如何制作寬度和高度相等的Flexbox項目

Question

我試圖使所有flexbox項目的寬度和高度都相等，即使由於小屏幕（其中的第三條環繞）它們增加了行數時，它們也是如此。 我相信關鍵屬性是align-items:stretch ，但這不起作用。 我在哪里犯錯？

我無法修改html-結構為nav > ul > li > a 。

我已經閱讀了很多書，在這里看到了類似的解決方案，但是它們都是簡單列表，沒有內部結構（在我的情況下a鏈接），它們只是在子元素上設置了display:flex 。 但是，在我看來，這違反了“相同寬度”的要求。

 body { font-family: Lucida, sans-serif; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: stretch; /* This is what I thought to be the key property*/ } nav li { flex-grow: 1; flex-shrink: 1; flex-basis: 0; text-align: center; } nav a { text-decoration: none; color: #000; border: 2px solid rgb(20, 60, 168); background-color: rgba(20, 60, 168, .2); padding: 10px 10px 8px; display: block; } 

 <nav> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">The third seems to be quite long</a></li> <li><a href="#">Fourth</a></li> </ul> </nav> 

Answer 1

您幾乎不錯， li的身高是相等的，但不是他們的內容。 只需增加height: 100%;

 body { font-family: Lucida, sans-serif; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; /*align-items: stretch; not needed, it's by default*/ } nav li { flex-grow: 1; flex-shrink: 1; flex-basis: 0; text-align: center; } nav a { text-decoration: none; color: #000; border: 2px solid rgb(20, 60, 168); background-color: rgba(20, 60, 168, .2); padding: 10px 10px 8px; display: block; height:100%; box-sizing:border-box; /*Don't forget this*/ } 

 <nav> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">The third seems to be quite long</a></li> <li><a href="#">Fourth</a></li> </ul> </nav>