用 flex 填充父级的高度

Question

我正在做一些响应式设计，其中我有一个 ul，里面有一些 li 元素，文本长度有所不同。我希望 li 元素填充 ul 的高度，但我遇到了一些麻烦。当其中一个元素的内容变得太长时，li 元素具有不同的高度。示例如下：

ul {
  display: flex; 
  align-items: center; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
  height: 100%;
}

<ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

如何使 li 元素具有相同的高度，而不考虑它们的内容？

Answer 1

将align-items: center替换为ul中的align-items: stretch。并删除 li.

中的 height: 100%

ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
}

<ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

如项目名称所示，这意味着一个带有链接的菜单？！我把 a 标签放在每个 li 标签里。

通过添加 display: inherit 从父项继承 li 弹性规则。并添加这个 css 使你的穿刺垂直居中：

ul li a {  
  margin: auto 0 auto 0;
}

ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  display: inherit; 
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
}

ul li a {  
  margin: auto 0 auto 0;
}

<ul>
  <li><a href="">Longer text here 1-2-3</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Payment</a></li>
  <li><a href="">Payment step 2</a></li>
  <li><a href="">Receipt</a></li>
</ul>

用 flex 填充父级的高度

Fill height of parent with flex

html

css

height

flexbox