[譯]Flexbox:使用 Auto Margin 對齊

原文:Flexbox: Aligning with Auto Margins, by Samantha Mingcss

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

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

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

理解 margin

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

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

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

Auto Margin 的優先級高 🏆

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

爲何?flexbox

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

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

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,你可能就會有點頭暈,它究竟是想要實現怎樣的佈局效果。固然,這只是個人建議。你能夠爲你和你的團隊作出合適的選擇 😊

資源

(完)

相關文章
相關標籤/搜索