垂直对齐不适用于弹性项目

Posted 2023-03-05

【中文标题】垂直对齐不适用于弹性项目

【英文标题】：Vertical-align doesn't work on flex item

【发布时间】：2018-04-01 21:22:12

【问题描述】：

我尝试将纯文本垂直集中在弹性框元素内。

我决定将属性display:table-cell 与vertical-align: middle 一起使用。但它似乎不能在 flexbox 元素中正常工作。

如何在不使用包装或定位的情况下垂直集中它，同时仍然用省略号截断长文本？

.container 
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;


.item 
  display: table-cell;
  vertical-align: middle;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


.item:nth-of-type(2n) 
  background-color: aliceblue;

<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>

View On CodePen

【参考方案1】：

一种解决方案是将每个弹性项目定义为自己的弹性容器，以便将其内容垂直居中align-items:center。要保持text-overflow 正常工作，请为每个弹性项目添加一个子元素，然后可以用省略号将其截断。

我无法简明地解释为什么text-overflow 不能与display:flex 和neither can David Wesst 一起使用。用他的话说：

事实证明，确实没有一种干净的方法可以做到这一点。如果你想知道我是如何得出这个结论的，你可以停下来，因为我没有。那些负责规范的人做了，您可以阅读以Mozilla bug report 开头并导致whole mail group discussion 关于为什么应该（或者，在这种情况下，不应该）作为规范的一部分实施的完整对话。

这是一个工作示例：

.container 
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;


.item 
  display: flex;
  align-items: center;
  flex: 1;
  background-color: cyan;


.item span 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


.item:nth-of-type(2n) 
  background-color: aliceblue;

<div class="container">
  <div class="item"><span>Hello, I'm very very long string! Hello, I'm very very long string!</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
</div>

另见：Setting ellipsis on text from a flex container

【参考方案2】：

当您将元素设置为 flex 容器（使用 display: flex 或 display: inline-flex）时，所有流入的子项都将成为 flex 项。

所有 flex 项目的 display 值都由容器控制。不管你指定什么，容器都会覆盖它。

所以当你给一个弹性项目display: table-cell时，浏览器会忽略它。这是它在 Chrome 开发工具中的样子：

样式标签

计算选项卡

弹性容器“阻塞”弹性项目，使它们具有块级元素的许多特性 (source)。

但vertical-align 属性仅适用于内联级和表格单元格元素 (source)。

这就是它不起作用的原因。

无论如何，vertical-align，即使它有效，在这种情况下也是完全不必要的黑客攻击。有一些 flex 属性设计用于对齐 flex 项中的内容。

.container 
  width: 500px;
  height: 500px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;


.item 
  flex: 1 1;
  display: flex;
  justify-content: center; /* horizontal alignment, in this case */
  align-items: center;     /* vertical alignment, in this case */
  background-color: cyan;


.item:nth-of-type(2n) 
  background-color: aliceblue;

<div class="container">
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>  

相关帖子：

How to vertically align text inside a flexbox? Setting ellipsis on text from a flex container

【讨论】：

问题已更改。长文本不在原始代码中。所以这个答案现在涵盖了新问题的对齐部分，而不是省略号部分。

【参考方案3】：

Blockquote ...float、clear 和 vertical-align 对弹性项目没有影响。 根据https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请参阅How to vertically align text inside a flexbox? 了解可能的解决方案。

【参考方案4】：

您还必须将这些项目定义为弹性容器，为它们使用以下 CSS（没有表格单元格显示...）：

display: flex;
flex-direction: column;
justify-content: center;

.container 
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;


.item 
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


.item:nth-of-type(2n) 
  background-color: aliceblue;

<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>