css - 使 flex 元素拉伸(stretch)全高并垂直居中其内容

Question

我有一个带有一些元素的水平 flexbox (即 flex-direction: row，即并排)。每个元素可以是单行文本，也可以有多行。我想垂直对齐每个 flex 元素的内容。

如果每个元素都有透明背景，我可以轻松使用 align-items: center。但是，我希望每个元素都垂直拉伸(stretch)，因为我想将背景(或者可能是边框，或者可能是可点击区域)设置为整个可用高度。

到目前为止，我知道:

• 拉伸(stretch):对齐元素:拉伸(stretch)
• 对齐:align-items: center
• 拉伸(stretch)和对齐:???

演示可在 http://codepen.io/denilsonsa/pen/bVBQNa 获得

ul {
  display: flex;
  flex-direction: row;
}
ul.first {
  align-items: stretch;
}
ul.second {
  align-items: center;
}
ul > li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 5em;
  text-align: center;
}
ul > li:nth-child(2) {
  background: #CFC;
}

/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }

<ul class="first">
  <li>Sample</li>
  <li><span>span</span></li>
  <li><span>multiple</span> <span>span</span></li>
  <li>text <span>span</span></li>
  <li>multi<br>line</li>
</ul>
<hr>
<ul class="second">
  <li>Sample</li>
  <li><span>span</span></li>
  <li><span>multiple</span> <span>span</span></li>
  <li>text <span>span</span></li>
  <li>multi<br>line</li>
</ul>

---

类似问题:

• Question 14012030和 question 23442692和 question 27729619和 question 25311541基本上问同样的事情，但他们要么有一个单一的元素或纯文本作为每个 flex 元素的 child 。一旦我们有混合内容，可能包含多个元素，这些解决方案就不起作用。
• Question 19026884是无关的，问题是错误的标记。

Answer 1

不幸的是，使用问题中发布的确切标记无法达到预期效果。

解决方案包括:

• 设置display: flex;在 <li> .
• 包装<li>内容到另一个元素。
  • 这是必需的，因为 <li>现在是一个 flex 容器，所以我们需要另一个元素来防止实际内容变成 flex 元素。
  • 在这个解决方案中，我引入了一个 <div>元素，但它可能是其他元素。
• 现在<li>是一个 flex 容器，它只包含一个 child ，我们可以使用 align-items和/或 justify-content对齐这个新的唯一 child 。

DOM 树如下所示:

<ul> flex-parent, direction=row
 ├ <li> flex-item && flex-parent && background && JavaScript clickable area
 │  └ <div> flex-item as a single transparent element
 │     ├ Actual contents
 │     └ Actual contents
 ├ …

注意:这个答案中的解决方案使用了 2 个嵌套的 flexbox 。 The solution by Michael_B使用 3 个嵌套的 flex 盒子，因为它有扩展 <a> 的额外挑战元素填充整个 <li> .哪一个是首选取决于每个案例。如果可以，我会接受这两个答案。

/* New code: this is the solution. */
ul > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Old code below. */
ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
ul > li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 5em;
  text-align: center;
}
ul > li:nth-child(2) {
  background: #CFC;
}

/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }

button:focus + ul {
    font-size: 14px;
    width: auto;
}

<button>Click here to set <code>width: auto</code> and reduce the font size.</button>

<!-- New code: there is a single <div> between each <li> and their contents. -->
<ul>
  <li><div>Sample</div></li>
  <li><div><span>span</span></div></li>
  <li><div><span>multiple</span> <span>span</span></div></li>
  <li><div>text <span>span</span></div></li>
  <li><div>multi<br>line</div></li>
</ul>