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

Question

我想显示一个带有指数(以及更多)的计算。为了设置行中的元素，我使用弹性框。在flexbox元素中，我想使用vertical-alignCSS属性。但是vertical-align属性不起作用。

我用不同的方法对其进行了测试，最终一个解决方案奏效了。但是，justify-content属性不再工作。在我的尝试中，我使用了该属性：flexwebkit版本：-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 显示为弹性框时，我如何使用垂直对齐。

Answer 1

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

由于exponent元素是 flex 容器的子元素，因此会自动阻止(规范)。这意味着它计算为块级元素，vertical-align被忽略。

如何定义 flex 项的display值并不重要(例如，在您的代码中，您将 flex 项设置为display: inline)。在弹性格式设置上下文中，弹性项目的display值由弹性算法控制。

使用vertical-align的关键是将其从 flex 格式上下文中删除。创建一个元素，该元素是弹性项的子元素。现在指数值超出了 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>

Answer 2

您应该使用"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

Answer 3

只是一个建议，你为什么不尝试使用supHTML标签作为指数？

<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>

Answer 4

您可以尝试为内容提供一些填充并使用 flex 的对齐项目：拉伸功能。

这是一个非常有用的弹性指南！作为前端开发人员，将其放在您的后口袋里真是太棒了！

弹性框指南！