html - 将 flexbox 元素与 flex-grow 元素对齐

Question

给定以下 CSS:

.row {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.middle {
    flex-grow: 1;
    margin: 0 1em;
}

以及以下 HTML:

<div>
    <div class="row">
        <div>X</div>
        <div class="middle">Variable Content</div>
        <div>A</div>
    </div>
    <div class="row">
        <div>X</div>
        <div class="middle">Content</div>
        <div>AB</div>
    </div>
    <div class="row">
        <div>X</div>
        <div class="middle">Var Content</div>
        <div>ABC</div>
    </div>
</div>

此布局包括行和三个“列”:

• "X"左列每一行都包含相同的元素，所以它的宽度实际上是固定的。此列应仅使用元素所需的空间量。
• “内容”中间栏包含可变文本。它应该占据每一行的大部分。
• “ABC” 右栏是我遇到问题的地方。内容是文本，可以是 1-5 个字符。我希望字符在整个“表格”中左对齐。 编辑:我不想声明固定宽度。

工作示例:https://codepen.io/anon/pen/bjEKBW

简而言之:我如何让每一列中的“A”在整个布局中左对齐？我不喜欢 HTML 布局。

Answer 1

你这里有一个table...我建议你使用一个或CSS-Tables。

.row {
  padding: 0;
  margin: 0;
  list-style: none;
  display: table-row;
}

.row div {
  display: table-cell;
  padding: 0 .25em;
}

.middle {
  width: 100%;
}

<div>
  <div class="row">
    <div>X</div>
    <div class="middle">Variable Content</div>
    <div>A</div>
  </div>
  <div class="row">
    <div>X</div>
    <div class="middle">Content</div>
    <div>AB</div>
  </div>
  <div class="row">
    <div>X</div>
    <div class="middle">Var Content</div>
    <div>ABC</div>
  </div>
</div>

或者，您可以放弃行并使用 CSS 网格

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

.grid div {
  padding: 0 .25em;
}

<div class="grid">

  <div>X</div>
  <div class="middle">Variable Content</div>
  <div>A</div>

  <div>X</div>
  <div class="middle">Content</div>
  <div>AB</div>

  <div>X</div>
  <div class="middle">Var Content</div>
  <div>ABC</div>

</div>