如何使 Flexbox 项目具有相同的宽度和高度

Question

我试图使所有弹性盒项目具有相同的宽度和高度，即使它们由于小屏幕（第三个链接换行）而增加了行数。我相信关键属性是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>