垂直对齐属性在弹性框中不起作用答案

【问题标题】：vertical-align property not working in flexbox垂直对齐属性在弹性框中不起作用
【发布时间】：2019-11-26 11:09:08
【问题描述】：

我想显示一个带有指数（以及更多）的计算。要设置行中的元素，我使用 flexbox。在 flexbox 元素中，我想使用 vertical-align CSS 属性。但是vertical-align 属性不起作用。

我用不同的方法对其进行了测试，最终一个解决方案奏效了。但随后 justify-content 属性不再起作用。在我的尝试中，我用于属性：flex webkit 版本：-webkit-box.

如果你想测试它，这里是小提琴中的片段：https://jsfiddle.net/oe3hxfma/

.calculation {
  display: flex;
  justify-content: center;
  font-size: 1.3em;
}

.exponent {
  display: inline;
  vertical-align: super;
}

.calculationTwo {
  display: -webkit-box;
  justify-content: center;
  font-size: 1.3em;
}

<div class="calculation">
  3
  <div class="exponent">
    2
  </div>
</div>

<div class="calculationTwo">
  3
  <div class="exponent">
    2
  </div>
</div>

当父 elmenet 显示为 flexbox 时，如何使用垂直对齐。

【问题讨论】：

不是你需要的align-self 和align-items 吗？ IIRC vertical-align 仅适用于内联或内联块显示属性。上述属性适用于任何显示器：父母/子女。
display: -webkit-box; 已过时且不再使用。
有没有办法使用align-self和align-items来改变一个元素的baseline？
@Paulie_D 角度构建范围代码以获得更好的浏览器支持。并且 -webkit-box 他添加了display:flex。

标签： html css flexbox vertical-alignment

【解决方案1】：

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

因为exponent 元素是弹性容器的子元素，它会自动阻塞 (spec)。这意味着它计算到一个块级元素，vertical-align 被忽略。

如何定义弹性项目的display 值并不重要（例如，在您的代码中，弹性项目设置为display: inline）。在flex formatting context 中，弹性项目的display 值由弹性算法控制。

使用vertical-align 的关键是将其从弹性格式化上下文中删除。创建一个作为弹性项目的子元素的元素。现在指数值超出了flex布局的范围，可以设置为display: inline。

另外，由于文本与容器顶部对齐，vertical-align: super 没有空间工作。所以将文本对齐到容器的中心或底部。

添加align-items: flex-end 或center（取决于你想要多少上标）。

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}

<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

【讨论】：

一个选项，给父级更大的高度并单独对齐指数 - jsfiddle.net/syn478hv
好的，感谢您的解释，所以我必须将其包装在额外的 div 中？仅仅展示一个元素并不是最好的解决方案。
@Paulie_D 这很有趣。我不知道您必须设置高度才能将项目与align-self 对齐。
@LukasSedelmaier，如果你想在弹性容器中使用vertical-align，那么可以。将指数值包装在嵌套容器中，将其置于 flex 布局范围之外，这是可行的方法。
否则，听从@Paulie_D的建议。向容器添加高度（以创建可用空间）并使用 flex 关键字对齐属性。

【解决方案2】：

您可以尝试为内容添加一些填充并使用 align-items: flex 的拉伸功能。

这是一个非常有用的 flex 指南！作为前端开发人员，把它放在你的口袋里真是太棒了！

Flexbox Guide!

【讨论】：

【解决方案3】：

您应该使用“align-items”属性来对齐垂直位置的项目：

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align

【讨论】：

【解决方案4】：

只是一个建议，你为什么不尝试使用sup HTML Tag 进行指数化？

<div>
3 <sup>2</sup>
</div>

对于vertical alignment，display:flex 使用align-items，就像上面的答案一样。

div
{
   display: flex;
    justify-content: center;
}

  <div>
    3 <sup>2</sup>
    </div>

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}

<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

【讨论】：