html - 在 flex-grow 项目旁边对齐 flexbox 项目

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 布局。

标签： htmlcssflexbox

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

.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>