具有间距、等高、垂直和水平居中项目的 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>

我应该怎么做才能获得正确的菜单？我应该怎么做才能使文本水平和垂直居中？

Answer 1

也制作li flex-parents。无需设定高度。 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>

Answer 2

将align-items: center; 添加到ul。

CSS align-items 属性定义了浏览器如何沿容器的横轴在弹性项目之间和周围分配空间。这意味着它像 justify-content 一样工作，但在垂直方向上。

更多信息，请关注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>