连续控制2个弹性项目之间的中间空间

Question

如何控制连续两个弹性项目之间的中间空间？ 我的目标是最小化项目之间的中间空间。

换句话说，我想使列右对齐和居中对齐，同时保持文本居中。

我还希望能够控制中间装订线。 另外，也许可以说中间的装订线应该是一些固定的像素数量，例如20px。

这是行不通的，因为中间有太多空间

 .row { display: flex; } .column { border: 1px solid #ccc; width: 50%; } h2 { text-align: center; } 

 <div class="row"> <div class="column first"> <h2>Centered</h2> <h2>Text</h2> </div> <div class="column second"> <h2>Centered</h2> <h2>Text</h2> </div> </div> 

这不起作用，因为文本未居中

 .row { display: flex; } .column { border: 1px solid #ccc; width: 50%; } h2 { text-align: center; } .first h2 { text-align: right; } .second h2 { text-align: left; } 

 <div class="row"> <div class="column first"> <h2>Centered</h2> <h2>Text</h2> </div> <div class="column second"> <h2>Centered</h2> <h2>Text</h2> </div> </div> 

Answer 1

如果您希望元素彼此之间或相对于整体具有特定比例（即50% ），则flexbox甚至不是最佳解决方案（尽管可以满足要求）。

一个简单的display: inline-block; width: 50%; box-sizing: border-box display: inline-block; width: 50%; box-sizing: border-box display: inline-block; width: 50%; box-sizing: border-box将孩子放在display: inline-block; width: 50%; box-sizing: border-box上。

---

Flexbox旨在允许流体分配正负空间。

如图所示，在浏览器确定了孩子需要多少空间以及他们有多少可用空间之后，通过比较两种情况处理两种情况：

• 正数空间 ：当父项>子项总和时，按照每个子项各自的flex-grow值（直到填充该空间）成比例地重新分配空间给每个孩子；如果没有子项具有正的flex-grow值，则在两个子项之间分配空间孩子
• 负空间 ：如果parent <孩子的总和，请按照其flex-shrink值按比例缩小每个孩子。

您有一个正数空间的情况，其中子级没有flex-grow ，因此可以在它们之间重新分配空间。 您有三种选择：

• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly

请注意，在每种情况下，空间是如何平均分配的。 这就是为什么它被称为flexbox ，这就是它的目的所在，并且，如果您愿意的话，这就是它的超能力。
当您设置width: 50%您会花掉所有这些：

 .row { display: flex; width: 100%; } .row>* { border: 1px solid #ccc; text-align: center; } .one { justify-content: space-between; } .two { justify-content: space-around; } .three { justify-content: space-evenly; } .grow>* { flex-grow: 1; margin: 1rem; } 

 <code>justify-content: space-between</code> <div class="row one"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <code>justify-content: space-between (unequal)</code> <div class="row one"> <div> <h2>A bigger element here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <code>justify-content: space-around;</code> <div class="row two"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <code>justify-content: space-around; (unequal)</code> <div class="row two"> <div> <h2>A bigger element here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <code>justify-content: space-evenly;</code> <div class="row three"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <code>justify-content: space-evenly; (unequal)</code> <div class="row three"> <div> <h2>A bigger element here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <code>> flex-grow: 1;</code> <div class="row grow"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <code>> flex-grow: 1; (unequal elements)</code> <div class="row grow"> <div> <h2>A bigger element here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> 

关于flexbox如何工作的更详细的解释可以在这里找到。

官方规格在这里 。

---

考虑到您的问题， justify-content: space-evenly存在很大的机会justify-content: space-evenly您的需求，但是我不确定，因为您的问题还不是很清楚。

重要说明 ：您可以始终在元素上使用margin和padding ，这将相应地推动它们。 另请注意margin: auto在flexbox子项上的flexbox会从flexbox窃取正数空间，并将在父空间中存在的所有margin:auto s之间平均分配（并使其看起来像flexbox不能正常工作；实际上可以，但是没有任何剩余可重新分配）。

---

如果要在元素之间有特定的距离，并且整个构图应位于可用空间的中心，则可以将单个项目放在可用空间的中心，然后可以在该项目的内部放置这些项目，这样整个事情就是居中，无论项目是否不相等。

例：

 .row { display: flex; justify-content: center; } .row > * { margin: 0 auto; display: flex; } .row>*>* { border: 1px solid #ccc; text-align: center; margin: 1rem; } 

 <div class="row"> <div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> </div> <hr> <div class="row"> <div> <div> <h2>Much more text here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> </div> <hr> <div class="row"> <div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Much more text here</h2> <p>Text</p> </div> </div> </div> 

但是，同样，您不需要flexbox 。
使用简单的parent > child结构可以实现完全相同的效果，其中parent具有display: block; text-align: center; display: block; text-align: center; 子级display: inline-block;

 .row { text-align: center; } .row>* { border: 1px solid #ccc; text-align: center; margin: 1rem; display: inline-block; } 

 <div class="row"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <div class="row"> <div> <h2>Much more text here</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> </div> <hr> <div class="row"> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Centered</h2> <p>Text</p> </div> <div> <h2>Much more text here</h2> <p>Text</p> </div> </div> 

注意标记中没有多余的包装器。

Answer 2

为什么不简单地将CSS网格用于任务呢？ 它提供了grid-column-gap属性，可以完全满足您的需求：

 .row { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px; } .column { border: 1px solid #ccc; } h2 { text-align: center; } 

 <div class="row"> <div class="column"> <h2>Centered<br />Text</h2> </div> <div class="column"> <h2>Centered<br />Text</h2> </div> </div> 

Answer 3

试试这个

.column:not(:last-child){
margin-left: 20px;
}