Flex 佈局學習筆記

 

 

問題	解決
幾個基礎概念	main axis main start main end main size   cross axis cross start cross end cross size
容器的屬性	flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction	決定主軸的方向 row row-reverse column column-reverse
flex-wrap 屬性	換行 nowrap  wrap wrap-reverse第一行在下方
flex-flow	它是 flex-direction 加 flex-wrap 合併的寫法
justify-content	定義了項目在主軸上的對齊方式 flex-start  flex-end center space-between 兩端對齊 項目之間的間隔都相等 space-around  項目間隔比項目與邊框的間隔大一倍
align-items	定義項目在交叉軸上如何對齊 flex-start 交叉軸起點對齊 flex-end 交叉軸終點對齊 center 交叉軸的中點對齊 baseline 項目的第一行文字的基線對齊 stretch 若是沒有調高，或高爲auto，則在交叉軸方向充滿
align-content	flex-start  flex-end  center  space-between space-around   根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch
項目的屬性	有如下6個
order	數據越小越靠前
flex-grow	放大比例，默認是0  若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。 （我的感受這項定義得特別垃圾）
flex-shrink	縮小比例，默認爲1 若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。 （看不懂）
flex-basis	瀏覽器根據這個屬性，計算主軸是否有多餘空間，默認值爲auto 即項目的原本大小.
flex	flex-grow + flex-shrink + flex-basis 的簡寫
align-self	auto | flex-start | flex-end | center | baseline | stretch;