html - 如何使 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>