文本在 display flex 中没有正确对齐

Question

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

如 this fiddle 所示，div 中的文本是左对齐的，而 CSS text-adjust 不是有效的。我怀疑这是因为 div 的宽度不知何故无效，因为将宽度设置为例如每个数字单元格的 15% 会导致预期的行为。

当然，设置宽度与享受flex的意义相冲突，所以这不是正确的做法。我通过应用 justify-content 达到了要求的外观，但我的理解是应该以这种方式控制对齐方式（从容器 div 在子元素上施加位置）应用于块（即 div'ish 不是 span'ish 的东西）。在这方面我confused/mistaken吗？

我用谷歌搜索了它，但淹没在关于如何在 flex 容器中对齐子项的大量帖子中。与我的问题最接近的是但我真的不明白它与我想要实现的目标有何不同。而且，它并没有让我理解我的想法哪里出了问题（毫无疑问是，但我预计不会）。

是否建议在单元格 div 中始终使用非 flex'ish 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>

Answer 1

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

首先，了解弹性容器方向的默认行为设置为 row 很重要。这意味着 flex 容器内的所有子元素将尽可能长时间地并排放置。此外，我们在使用 flexbox 时不再考虑左或右。我们不考虑主轴和横轴。

主轴为方向，子元素布局。所以默认情况下是从左到右。

那么横轴就是从上到下。

接下来重要的是要知道，默认情况下，flex 容器内的子元素只占用所需的 space。

/* 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 容器和子元素的默认行为，让我们看看我们必须做些什么才能使文本对齐工作。

一种方法是拉伸子元素，使里面的文本有足够的 space 对齐。

我们可以对子元素使用属性 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 class 中删除 display: flex 并添加一些 flex-grow: 1

请看我更新的fiddle： 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>

文本在 display flex 中没有正确对齐

Text doesn't get right aligned in display flex

html

css

flexbox

text-justify