[譯]Flexbox：使用 Auto Margin 對齊

原文：Flexbox: Aligning with Auto Margins, by Samantha Ming

align-self 控制的是交叉軸上的 Flex 項目對齊。但問題來了，「在主軸上有沒有相似的屬性存在呢」，好比說「justify-self」🤔 好問題！不過答案是沒有😅。但有一個已經存在的屬性能夠利用，那就是 auto margin ！咱們能夠用它控制指定元素在水平方向上的對齊方式。

事實上，你也能夠用 auto margin 控制指定元素在垂直方向上的對齊方式。

並且，若是你在 Flex 項目設置了 margin: auto（相對於 left、right、top、bottom 四個方向都同時設置了），甚至能夠實現 Flex 項目在容器中的垂直居中效果！

理解 margin

看到這兒，你可能有點困惑了。爲何使用了 margin-left: auto 後，Flex 項目被推倒右邊了呢；爲何使用了 margin-right: auto 後，Flex 項目被推倒左邊了呢。有點反直覺哦，別擔憂，我也這麼以爲 😅

還記得 margin 的基本概念嗎？其實就是爲了給元素添加間隔。好比 margin-left: 50px，會在元素的左邊添加 50px 的間隔，將元素向右推了一些距離。使用 margin-left: auto，auto 則會計算當前的整個可用空間，而後將這麼多的空間安排在元素的左側，結果將元素一直向右推。

margin	間隔	表現
margin-left	在左邊添加間隔	將元素向右推
margin-right	在右邊添加間隔	將元素向左推
margin-top	在上邊添加間隔	將元素向下推
margin-bottom	在下邊添加間隔	將元素向上推
margin	在每一個面都添加間隔	元素垂直居中

Auto Margin 的優先級高 🏆

若是在 Flex 項目使用了 auto margin，那麼它的優先級高於在其餘地方的對齊屬性設置，至關於在其餘地方的設置無效了 💪

爲何？

注意：若是剩餘空間分配給了 auto margin，那麼對齊屬性在那個維度上的設置就會無效，由於 margin 已經用完了剩餘空間（在 Flex 項目分配完成後）。

若是用非開發術語表述的話，auto margin 是你懷着善意邀請的某個笨朋友，他住在你的房子裏，而後認爲整個房子都是他的，並佔用了全部空間。你沒有那種朋友？我也沒有😳但我想你應該明白了我要表達的那個點了吧😂

Auto Margin 案例

下面列出了一些關於使用 auto margin 的例子，很是亮眼！用它來佈局你喜歡的導航欄排版樣式很是好 🤩

我該用哪一個？ 🤔

我保證你對使用哪一個或者何時改用哪一個有點頭暈（這是要選擇的問題，對嘛）😅。我是這麼作的：

1. 優先使用 Flexbox 屬性
2. 若是不能實現效果，就用 auto margin

理由？我以爲 Flexbox 屬性更加符合直覺，比「auto margin」 的表達也更加明確。來比較下：

.child {
  align-self: flex-end;
}
複製代碼

vs

.child {
  margin-top: auto;
}
複製代碼

即便你沒有學習過關於 Flexbox 方面的相關知識。只從字面上看代碼的話，咱們能夠推斷出 child 是對齊到末端的（end）。而來再看看 margin-top: auto，你可能就會有點頭暈，它究竟是想要實現怎樣的佈局效果。固然，這只是個人建議。你能夠爲你和你的團隊作出合適的選擇 😊

資源

• W3C Flexbox Spec: Aligning with auto margins
• Hackernoon: Flexbox's Best-Kept Secret
• CSS Tricks: The peculiar magic of flexbox and auto margins
• Stack Overflow: Why are there no "justify-items" and "justify-self" properties?
• Stack Overflow: Can't scroll to top of flex item that is overflowing container

（完）