Flexbox align-items：基准有效，但align-self：基准無效。 為什么？

Question

我似乎正在觀察flexbox的一些令人困惑的行為，特別是在嘗試使用align-self: baseline 。 基本的問題是它根本不起作用。 以下代碼段演示了該問題：

 .flex-form { display: flex; } .flex-form label { align-self: baseline; } input[type=text] { border: 1px solid black; font-size: 16px; margin: 0 10px; padding: 5px; } button { background-color: white; border: 1px solid black; margin: 0; } 

 <form class="flex-form"> <label>Label: </label> <input type="text" placeholder=" " /> <button type="submit">Submit</button> </form> 

這是輸出的屏幕截圖：

如您所見，盡管設置了align-self: baseline ，標簽的基線仍未與其他表單元素align-self: baseline 。 但是，如果我在父容器上使用align-items: baseline ，則會得到不同的結果：

 .flex-form { display: flex; align-items: baseline; } input[type=text] { border: 1px solid black; font-size: 16px; margin: 0 10px; padding: 5px; } button { align-self: stretch; background-color: white; border: 1px solid black; margin: 0; } 

 <form class="flex-form"> <label>Label: </label> <input type="text" placeholder=" " /> <button type="submit">Submit</button> </form> 

根據規范，這是正確的行為還是錯誤？ 如果是這樣，為什么？ 有解決方法嗎？ 作為參考，我已經在macOS 10.11.6上的Chrome 54，Safari 9.1.2和Firefox 50上進行了測試，它們似乎都表現出相同的結果。

Answer 1

解

如果要對所有項目進行基線對齊，請對每個容器應用align-self: baseline ，或者更簡單地在容器上設置align-items: baseline 。

說明

flex容器的初始設置是align-items: stretch 。

這意味着所有可彎曲物品都將擴展容器的整個橫軸長度。

這就是您的布局中正在發生的事情。 除了 ，您已覆蓋align-items: stretch通過應用align-self: baseline在一個彈性項目（ label ）上align-items: stretch 。

當其他彈性項目拉伸時，標簽具有baseline指示，但沒有參考點。

從規格：

8.3。 跨軸對齊： align-items和align-self屬性

baseline

如果flex項目的內聯軸與交叉軸相同，則此值與flex-start相同。

否則，它將參與基線對齊：對齊該行上所有參與的彈性項目，以使其基線對齊，並且將其基線和其交叉起始邊緣之間的距離最大的項目與該交叉起始邊緣齊平放置。線。

好吧，讓我們分解一下：

• 第一行不適用。 在這種情況下，flex項的內聯軸與主軸（水平）相同，而與橫軸（垂直）相同，因此baseline無法解析為flex-start 。

• “ ...該行上所有參與的flex項目都已對齊，以使其基線對齊...”好吧，只有一個項目具有基線對齊。 沒有其他基准可供參考。 顯然，在這種情況下，瀏覽器會退回到flex-start （但是我沒有看到有關此行為的官方參考）。

規范語言的其余部分與該問題無關，但在相關文章中進行了詳細介紹： flex-start和底線有什么區別？