如何制作宽度和高度相等的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>