居中和底部對齊 flex 項目

Question

我有一個具有以下屬性的 flex 容器（藍色方塊）：

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

因此，它的子元素（淺藍色方塊）如下所示。 但是，我想從正常流中添加另一個子項（綠色方塊）並將其相對於其父項定位。 要像下面看到的那樣定位它，我最好寫一些類似bottom: 20px;東西bottom: 20px; 和margin: auto; .

我試圖玩弄z-index無濟於事。 我應該如何處理這個問題？ 我應該求助於創建另一個父元素嗎？

Answer 1

以下是實現此布局的五個選項：

1. CSS 定位
2. 帶有隱形 DOM 元素的 Flexbox
3. 帶有隱形偽元素的 Flexbox
4. 帶flex: 1 Flexbox flex: 1
5. CSS 網格布局

---

方法 #1：CSS 定位屬性

應用position: relative對於 flex 容器。

將position: absolute應用到綠色 flex 項目。

現在綠色方塊絕對位於 flex 容器內。

更具體地說，綠色方塊從文檔流中移除，但保留在最近定位的祖先的邊界內。

使用 CSS 偏移屬性top 、 bottom 、 left和right來移動綠色方塊。

 flex-container { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; position: relative; border: 4px solid blue; height: 300px; width: 300px; } flex-container > flex-item:first-child { display: flex; } flex-container > flex-item:first-child > flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; } flex-container > flex-item:last-child { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); /* fine tune horizontal centering */ border: 4px solid chartreuse; height: 50px; width: 50px; }

 <flex-container> <flex-item><!-- also flex container --> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-item> <flex-item></flex-item> </flex-container>

一個警告：一些瀏覽器可能不會從正常流程中完全刪除絕對定位的彈性項目。 這以一種非標准的、意想不到的方式改變了對齊方式。 更多細節：絕對定位的彈性項目不會從 Firefox 和 IE11 的正常流程中刪除

---

方法#2：Flex Auto Margins & Invisible Flex Item（DOM 元素）

通過結合auto邊距和一個新的、不可見的彈性項目，可以實現布局。

新的 flex item 與底部 item 相同，並放置在另一端（頂部）。

更具體地說，因為 flex 對齊是基於自由空間的分布，新項目是保持三個藍色框垂直居中的必要平衡。 新項目必須與現有綠色項目的高度相同，否則藍色框將不會精確居中。

新項目從視圖中移除， visibility: hidden 。

簡而言之：

• 創建綠色框的副本。
• 將其放在列表的開頭。
• 使用 flex auto margins 保持藍色框居中，兩個綠色框從兩端創建相等的平衡。
• 應用visibility: hidden到重復的綠色框。

 flex-container { display: flex; flex-direction: column; align-items: center; border: 4px solid blue; height: 300px; width: 300px; } flex-container > flex-item:first-child { margin-top: auto; visibility: hidden; } flex-container > flex-item:nth-child(2) { margin-top: auto; display: flex; } flex-container > flex-item:last-child { margin-top: auto; margin-bottom: auto; } flex-container > flex-item:first-child, flex-container > flex-item:last-child { border: 4px solid chartreuse; height: 50px; width: 50px; } flex-container > flex-item:nth-child(2) > flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; }

 <flex-container> <flex-item></flex-item> <flex-item><!-- also flex container --> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-item> <flex-item></flex-item> </flex-container>

---

方法#3：Flex Auto Margins & Invisible Flex Item（偽元素）

這種方法與#2 類似，但它在語義上更清晰，並且必須知道綠色框的高度。

• 創建一個與現有綠色框高度相同的偽元素。
• 使用::before將其放在容器的開頭。
• 使用 flex auto margins 保持藍色框居中，綠色偽元素和 DOM 元素從兩端創建相等的平衡。

 flex-container { display: flex; flex-direction: column; align-items: center; border: 4px solid blue; height: 300px; width: 300px; } flex-container::before { content: ""; margin-top: auto; height: calc(50px + 8px); /* height + borders */ visibility: hidden; } flex-container > flex-item:first-child { margin-top: auto; display: flex; } flex-container > flex-item:last-child { margin-top: auto; margin-bottom: auto; border: 4px solid chartreuse; height: 50px; width: 50px; } flex-container > flex-item:first-child > flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; }

 <flex-container> <flex-item><!-- also flex container --> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-item> <flex-item></flex-item> </flex-container>

---

方法 #4：將flex: 1添加到頂部和底部項目

從上面的方法 #2 或 #3 開始，不要擔心頂部和底部項目的高度相等以保持平衡，只需給每個項目flex: 1 。 這將迫使它們都消耗可用空間，從而使中間項目居中。

然后，您可以將display: flex添加到底部項目以對齊內容。

---

方法 #5：CSS 網格布局

這可能是最干凈、最有效的方法。 不需要絕對定位、虛假元素或其他黑客。

只需創建一個包含三行的網格。 然后將第二行和第三行中的項目居中對齊。 第一行可以保持為空。

 grid-container { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; justify-items: center; border: 4px solid blue; height: 300px; width: 300px; } grid-item:nth-child(2) { display: flex; } grid-item:nth-child(2)>flex-item { width: 50px; height: 50px; margin: 0 5px; border: 4px solid aqua; } grid-item:nth-child(3) { border: 4px solid chartreuse; height: 50px; width: 50px; }

 <grid-container> <grid-item></grid-item> <grid-item><!-- also flex container --> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </grid-item> <grid-item></grid-item> </grid-container>

Answer 2

讓帶有position: relative的容器和帶有position:absolute;的綠色方塊position:absolute;

 body { margin: 0; } #container { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 192px; height: 192px; border: 4px solid indigo; position: relative; background: lavender; } .blue { margin: 10px; width: 30px; height: 30px; outline: 4px solid skyblue; background: honeydew; } #green { position: absolute; width: 30px; height: 30px; left: 0; right: 0; margin: auto; bottom: 20px; outline: 4px solid yellowgreen; background: greenyellow; }

 <div id=container> <div class=blue></div><div class=blue></div><div class=blue></div> <div id=green></div> </div>

Answer 3

您可以使用偽指令將前三個容器向下移動一行，然后將margin:auto到最后一個

 div { display:flex; flex-wrap:wrap; border:#0066FD solid;; width:200px; height:200px; justify-content:space-around; /* show me box center */ background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%) } span, div:before { width:50px; height:50px; border:solid #01CDFF; margin:0 auto 0; } span:last-of-type , div:before{ margin: 12px auto; border:solid #01FE43; } div:before { content:''; width:100%; border:none; } span { /* show me box center */ background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%) }

 <div> <span></span> <span></span> <span></span> <span></span> </div>