html - 文字在Display Flex中无法正确对齐

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

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

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

我已经在Google上进行了搜索，但是淹没了无数关于如何在Flex容器中对齐儿童的帖子。与我的问题最接近的是here，但我真的不明白它与我要达到的目标有何不同。另外，它并不能使我了解我的想法出了问题的地方（无疑是的，但我希望不会的）。

是否建议在cell'ish 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>

最佳答案

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

希望对您有所帮助:-)

关于html - 文字在Display Flex中无法正确对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55487440/