1

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

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

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

我用谷歌搜索了它，但淹没在无数关于如何在 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>
4

2 回答 2

2

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

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

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

我希望它有帮助:-)

于 2019-04-03T05:36:58.073 回答
0

通常，当您调用父级时，display: flex他的子级包含默认行为，这意味着它的默认值 get 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>
于 2019-04-03T06:12:27.393 回答