Question

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

如this fiddle所示，div内的文本保持对齐，并且CSS text-adjust 无效。我怀疑这是因为div的宽度某种程度上是无效的，因为将宽度设置为例如每个数字单元格15％会导致预期的行为。

当然，设置宽度与享受柔韧性恰恰相反，因此这不是正确的选择。我通过应用 justify-content 达到了要求的外观，但是我的理解是，应该以这种方式（从将div放置在子元素上的容器div方式）控制对齐方式应用于块（即， div'ish不是span'ish的东西）。我在这方面感到困惑/错误吗？

我已经用Google搜索了它，但是淹没在关于如何在flex容器中对齐孩子的大量文章中。与我的问题最接近的是here，但我不太了解它与我要达到的目标有何不同。另外，它并不能使我了解我的想法出了问题的地方（无疑是的，但我希望不会的）。

是否建议在单元格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>

Answer 1

为了了解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/

我希望它会有所帮助：-）

Answer 2

通常，当您呼叫父级 display: flex 时，其子级包含默认行为，这意味着其默认值为 flex-direction: row 。在flexbox行元素不起作用的情况下，text-align属性不起作用，当您调用 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中无法正确对齐

2 个答案: