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表。

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

Answer 2

您可以为最后一列设置固定宽度，例如

.row > div:last-child {
    width: 100px;
}

已更新：https://codepen.io/kfedorov91/pen/ejJKWL

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

2 个答案: