我有一个标题，看起来像这样:
<header>
<div>A</div>
<div>B</div>
<div>C</div>
</header>
我希望所有的间距都在A和B之间，而不是均匀地排列这些项目，如下所示:
Is there any way to do this with plain CSS, without adding extra wrapper elements in HTML?个
我指的是spacing，在我的例子中，A和B都是可点击的，我不希望它们涂抹在整个标题上，将flex-grow: 1加到A就是作弊????.
以下是我能想到的一些基本解决方案:
对于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>