请注意，这不是一个简单的“我如何获得XXX”问题。我可以实现我想要的外观，但是我对此感到惊讶。因此，我担心我做的不好。
如该小提琴所示，div内的文本保持对齐，并且CSS文本调整无效。我怀疑这是因为div的宽度某种程度上是无效的，因为将每个数字单元格的宽度设置为例如15％会导致预期的行为。
当然，设置宽度与享受柔韧性恰恰相反，因此这不是正确的选择。我通过应用justify-content达到了要求的外观，但是我的理解是，应该以这种方式（从将div放置在子元素上的容器div中）控制对齐方式应用于块（即div'ish not span'ish）东西）。在这方面，我是否感到困惑/错误？
我已经在Google上进行了搜索，但是淹没了无数关于如何在Flex容器中对齐儿童的帖子。与我的问题最接近的是这里，但是我真的不明白它与我要达到的目标有何不同。另外，它并不能使我了解我的想法出了问题的地方（无疑是的，但我希望不会的）。
是否建议在单元格div内始终有一个非弹性的div来封装其中的文本质量？好像是不好的HTML标记。
div.data-row-cell {
display: flex;
padding: 3px;
}
div.data-row-value {
text-align: right;
flex: 1;
}
<div class="data-row">
<div *ngFor="let data of data"
class="data-row-cell data-row-value">
{{data}}
</div>
</div>
为了了解flex的工作原理，我们应该做一些测试。因此，我将建立一些示例。
首先，重要的是要知道将弹性容器方向的默认行为设置为row。这意味着flex容器内的所有子元素都将尽可能长时间地放置在一起。同样，在使用flexbox时，我们不再考虑向左或向右。我们不认为主轴和交叉轴。
主轴是方向，子元素的布局。因此，默认情况下是从左到右。
交叉轴将从上至下。
接下来，重要的是要知道，默认情况下，flex容器内的子元素仅占用所需的空间。
/* just for some nice looking */
* {
font-family: sans-serif;
box-sizing: border-box;
}
.flex-container {
display: flex;
width: 100%;
padding: 1rem;
background: #666;
}
.flex-item {
padding: 0.5rem;
font-weight: bold;
color: white;
}
.r {
background: red;
}
.g {
background: darkgreen;
}
.b {
background: blue;
}<div class="flex-container">
<div class="flex-item r">blue</div>
<div class="flex-item g">red</div>
<div class="flex-item b">green</div>
</div>从现在开始，我们知道了flex容器和子元素的默认行为，让我们看看我们需要做些什么才能使文本对齐工作。
一种方法是拉伸子元素，以便内部文本具有足够的对齐空间。
我们可以使用flex-grow子元素的属性来做到这一点：
.flex-item {
...
flex-grow: 1;
}
.r {
...
text-align: left;
}
.g {
...
text-align: center;
}
.b {
...
text-align: right;
}因此，在您的情况下，我们可以display: flex从.data-row-cell类中删除，然后添加一些flex-grow: 1
请查看我更新的小提琴：https : //jsfiddle.net/7wfm1s0j/
希望对您有所帮助:-)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句