這是一篇介紹和簡單的flex 布局的教程
Intro
Flexbox布局 是一種為了解決現(xiàn)代web 復(fù)雜布局的新型的css3布局方案。
印象中最深的一次了解flex布局是在css conf上，Git Cafe的工程師講的.但當(dāng)時由于其還沒有得到各大瀏覽器廠商的廣泛支持，我有專注于js沒太在意這塊的東西，所以僅僅只是一個了解。
但隨著react 的革命，讓我們享受到組件化帶來的便利的同時，也帶來了js工程也需要考慮css的布局，特別是css組件化。更重要的原因還是隨著手機(jī)端的不斷普及，還有瀏覽器對對css3新特性的支持，讓我們有幸使用到了更好的布局解決方案。
瀏覽器支持情況
Why Flexbox
我們一直習(xí)慣于使用tables, floats, inline-blocks 以及其他css屬性來布局界面。
但其實(shí)這些屬性都不是為了現(xiàn)代復(fù)雜交互的網(wǎng)頁和webapp的布局而設(shè)計(jì)的。比如，簡單的垂直居中就不容易實(shí)現(xiàn)；復(fù)雜的flexible grid布局 實(shí)現(xiàn)起來更加費(fèi)勁。
How
兩個重要的元素：
container 和 item
flexbox
container
container 存在兩根軸 main axis 和cross axis.
container的屬性:
-
flex-direction [row | row-reverse | column | column-reverse]main axis的方向 -
flex-wrap [nowrap | wrap | wrap-reverse]默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。 -
flex-flow [<flex-direction> || <flex-wrap>]上面兩個的合體 -
justify-content [flex-start | flex-end | center | space-between | space-around]對齊方式 main axis -
align-items [flex-start | flex-end | center | baseline | stretch]對齊方式 cross axis -
align-content [flex-start | flex-end | center | space-between | space-around | stretch]定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用
item
item 則沿著 main axis排布。
單個item所占的空間分別用 main size 和 cross size 表示。
item的屬性:
-
order [<integer>]排列順序，默認(rèn) 0. -
flex-grow [<number>]放大比例，默認(rèn) 0,即如果存在剩余空間，也不放大. -
flex-shrink項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該item將縮小 -
flex-basis [<length> | auto; /* default auto */]分配多余空間之前，項(xiàng)目占據(jù)的 main size, 默認(rèn)auto -
flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。 -
align-self [auto | flex-start | flex-end | center | baseline | stretch]讓單個item有與其他item不一樣的對齊方式，可覆蓋align-items屬性，默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
預(yù)告:下面會有一篇關(guān)于《Flexbox 打造柵格布局》
歡迎關(guān)注我的專欄知乎前端雜貨鋪
參考:
