原文: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-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 |
在每一個面都添加間隔 | 元素垂直居中 |
若是在 Flex 項目使用了 auto margin,那麼它的優先級高於在其餘地方的對齊屬性設置,至關於在其餘地方的設置無效了 💪flex
爲何?flexbox
注意:若是剩餘空間分配給了 auto margin,那麼對齊屬性在那個維度上的設置就會無效,由於 margin 已經用完了剩餘空間(在 Flex 項目分配完成後)。spa
若是用非開發術語表述的話,auto margin 是你懷着善意邀請的某個笨朋友,他住在你的房子裏,而後認爲整個房子都是他的,並佔用了全部空間。你沒有那種朋友?我也沒有😳但我想你應該明白了我要表達的那個點了吧😂3d
下面列出了一些關於使用 auto margin 的例子,很是亮眼!用它來佈局你喜歡的導航欄排版樣式很是好 🤩
我保證你對使用哪一個或者何時改用哪一個有點頭暈(這是要選擇的問題,對嘛)😅。我是這麼作的:
理由?我以爲 Flexbox 屬性更加符合直覺,比「auto margin」 的表達也更加明確。來比較下:
.child {
align-self: flex-end;
}
複製代碼
vs
.child {
margin-top: auto;
}
複製代碼
即便你沒有學習過關於 Flexbox 方面的相關知識。只從字面上看代碼的話,咱們能夠推斷出 child
是對齊到末端的(end)。而來再看看 margin-top: auto
,你可能就會有點頭暈,它究竟是想要實現怎樣的佈局效果。固然,這只是個人建議。你能夠爲你和你的團隊作出合適的選擇 😊
(完)