html - 具有间隔、等高、垂直和水平居中元素的 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 parent 。无需设定高度。 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>