文本在显示弹性中未右对齐

Question

请注意，这不是一个简单的"我如何获得XXX"的问题。我可以达到我想要的外观，但我对如何感到惊讶。因此，我担心我做得不好。

如本小提琴所示，div 中的文本左对齐，CSS文本调整无效。我怀疑这是因为div 的宽度不知何故无效，因为将每个数字单元格的宽度设置为 15% 会导致预期的行为。

当然，设置宽度与享受弹性的要点相冲突，所以这不是正确的方法。我通过应用justify-content来达到请求的外观，但我的理解是，以这种方式控制对齐方式(从容器div 强加在子元素上放置)应该应用于块(即div'ish 而不是 span'ish 的东西)。我在这方面感到困惑/错误吗？

我用谷歌搜索过它，但淹没在无数关于如何在弹性容器中对齐儿童的帖子中。与我的问题最接近的亲戚在这里，但我真的不明白它与我想要实现的目标有何不同。此外，它并没有让我了解我的想法哪里出了问题(毫无疑问，它确实出错了，但我希望它不会)。

是否建议在单元格中始终有一个非 flex'ishdiv 来封装其中的文本质量？这似乎是糟糕的 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>

Answer 1

为了理解flex是如何工作的，我们应该做一些测试。因此，我将构建一些示例。

首先，重要的是要知道 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来做到这一点：

/* 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;
}
/* Updated content */
.flex-item {
flex-grow: 1;
}
.r {
text-align: left;
}
.g {
text-align: center;
}
.b {
text-align: right;
}

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

因此，在您的情况下，我们可以从.data-row-cell类中删除display: flex并添加一些flex-grow: 1

请看我更新的小提琴： https://jsfiddle.net/7wfm1s0j/

我希望它有所帮助：-)

Answer 2

通常当你调用父display: flex时，他的子级包含一个默认行为，这意味着它的默认值得到flex-direction: row。 在 flexbox 行元素不起作用文本对齐属性中，当您在此处调用flex-direction: column来解决您的问题时，它是工作 一些示例：

**your code**
div.data-row-value {
text-align: right;
flex: 1;
border-color: lightblue;
}
/*my example 1 */
div.data-row-value {
/* text-align: center; */
flex: 1;
border-color: lightblue;
justify-content: flex-end;
}
/*my example 2 */
div.data-row-value {
text-align: right;
flex: 1;
border-color: lightblue;
flex-direction: column;
}
/*my example 3 */
<div *ngFor="let data of data" class="data-row-cell data-row-value">
<div style="width:100%">{{data}}</div>
</div>