html - 我可以将两个元素之间的所有空间放入 flexbox 或网格中吗？

Question

我有一个如下所示的标题:

<header>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</header>

我希望所有的空间都位于 A 和 B 之间，而不是均匀地间隔这些元素，如下所示:

有什么方法可以使用纯 CSS 来实现此目的，而无需在 HTML 中添加额外的包装元素？

---

我非常具体地谈论间距，添加 flex-grow: 1至A是作弊🙂就我而言A和B是可点击的，我不希望它们涂抹在整个标题上。

Answer 1

以下是我能想到的一些基本解决方案:

对于 flex 容器，请在“A”上使用 margin-right: auto。

对于 grid 容器，设置 grid-template-column: 1fr Repeat(2, min-content) 以便将“A”放置在 >1fr 列。

示例:

header {
  display: flex;
  width: 400px;
  outline: 3px solid #666;
}

div {
  width: 50px;
  height: 50px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  outline: 2px solid #000;
}

header>div:first-of-type {
  margin-right: auto;
}

main {
  display: grid;
  width: 400px;
  outline: 3px solid #666;
  grid-template-columns: 1fr repeat(2, min-content);
}

<h3>👇 Flex container</h3>
<header>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</header>

<h3>👇 Grid container </h3>
<main>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</main>

这里是我能想到的一些大家最喜欢的奇怪解决方案，这个例子使用伪元素作为间隔符(不推荐，只是为了展示可能性):

对于 flex 容器，指定伪元素间隔符的order，将其放置在“A”之后。

对于 grid 容器，指定伪元素间隔符以获取所需的列，以便自动放置可以覆盖其他元素。

示例:

header {
  display: flex;
  width: 400px;
  outline: 3px solid #666;
}

header::before {
  content: "I'm a pseudo spacer";
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
  order: 2;
  flex: 1;
}

div {
  width: 50px;
  height: 50px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  outline: 2px solid #000;
}

header > div {
  order: 3;
}

header > div:nth-of-type(1) {
  order: 1;
}

main {
  display: grid;
  width: 400px;
  outline: 3px solid #666;
  grid-template-columns: min-content 1fr repeat(2, min-content);
  grid-auto-flow: row dense;
}

main::before {
  content: "I'm a pseudo spacer";
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
  grid-column: 2 / 3;
}

<h3>👇 Flex but with pseudo element as spacer</h3>
<header>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</header>

<h3>👇 Grid but with pseudo element as spacer</h3>
<main>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</main>