連續控制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;
}