css 我可以把两个元素之间的所有空间放在弹性框或网格中吗？[duplicate]

rjjhvcjd 于 2022-12-05 发布在其他

关注(0)|答案(2)|浏览(106)

此问题在此处已有答案：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?（6个答案）
How can I align one item right with flexbox?（5个答案）
昨天关门了。
我有一个标题，看起来像这样：

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

我希望所有的间距都在A和B之间，而不是均匀地间隔这些项目，如下所示：

有没有办法在不添加HTML中的额外 Package 元素的情况下，使用普通CSS来实现这一点？

我非常具体地谈论 spacing，将flex-grow: 1添加到A是欺骗。🙂在我的例子中，A和B都是可点击的，我不希望它们在整个标题中被涂抹。

css

来源：https://stackoverflow.com/questions/74672587/can-i-put-all-the-space-between-two-elements-in-a-flex-box-or-grid

2条答案

按热度按时间

2w3kk1z51#

以下是我能想到的一些基本解决方案：
对于flex容器，在“A”上使用margin-right: auto。
对于grid容器，请设置grid-template-column: 1fr repeat(2, min-content)，以便将“A”放置在1fr列中。
示例：
第一个
这里有一些我能想到的大家都喜欢的奇怪的解决方案，这个例子使用伪元素作为间隔符（不推荐，只是为了说明这种可能性）：
对于flex容器，指定order作为伪元素分隔符，以将其放置在“A”之后。
对于grid容器，请指定伪元素分隔符以获取所需的列，以便自动放置可以覆盖其他元素。
示例：
第一次