注：這是我之前在微信公眾號‘雨后的夢溪筆談’ （yuhou5206）寫的一篇文章说榆，今天移至簡書肥缔，原創(chuàng)文章轉(zhuǎn)載請注明吩谦。
阮一峰flex布局篇網(wǎng)址:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
本篇基本參照阮一峰大神的內(nèi)容,有一些地方有稍許改動加入個(gè)人觀點(diǎn),讓我自己更易于理解.(其中原文中"交叉軸"在這里命做"側(cè)軸").如果有時(shí)間建議參觀面網(wǎng)址的原文,因?yàn)樵膱D片解析更加明了.
first:介紹
Flex布局:Flexible Box 彈性盒子布局,所以flex布局其實(shí)就是彈性盒子布局,就是彈彈彈,彈走魚尾紋,那種布局.任何一個(gè)容器都可以指定為Flex布局.
支持瀏覽器:需要支持的瀏覽器是,IE10+,所以一般應(yīng)用在移動端,如果要支持到IE8就要做處理.
second:開始
1.指定flex布局的兩種方式,以及兼容webkit內(nèi)核的瀏覽器.
(注意,當(dāng)設(shè)置為Flex布局以后,子元素的float,clear和vertical-align的屬性都將失效)
采用Flex布局的元素,稱為Flex容器(flex container),簡稱"容器". 它的所有子元素自動成為容器成員,稱為Flex項(xiàng)目(flex item),簡稱"項(xiàng)目".
每一個(gè)flex容器中都有兩個(gè)軸,主軸(main axis) ,側(cè)軸(cross axis) ,主軸的開始位置與邊框的交叉點(diǎn),叫做main start,結(jié)束位置叫做main end;側(cè)軸的開始位置叫做cross start,結(jié)束位置叫做cross end. 項(xiàng)目的默認(rèn)沿著主軸排列,單個(gè)項(xiàng)目占據(jù)主軸的空間叫做main size,占據(jù)交叉軸的空間叫做cross size.
2.容器的屬性
以下六個(gè)屬性是設(shè)置在容器上的.
flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
2.1 flex-direction 屬性
flex-direction屬性決定主軸的方向,也就是項(xiàng)目排列的方向;
XXX:row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端
XXX:row-reverse:主軸為水平方向,起點(diǎn)在右端
XXX:column:主軸為垂直方向,起點(diǎn)在上邊際
XXX:column-reverse 主軸為垂直方向,起點(diǎn)在下沿
** 2.2 flex-wrap 屬性**
默認(rèn)情況下,項(xiàng)目都排在一條線(又稱"軸線")上.flex-wrap空值的就是他的排列方式.
XXX:nowrap(默認(rèn)值):不換行
wrap:換行,第一行在上方
wrap-reverse:換行,第一行在下方
2.3flex-flow
flex-flow屬性是flex-direction屬性和flex-warp屬性的簡寫形式,默認(rèn)值為row nowrap,
也就是==>> flex-flow:flex-direction && flex-wrap
也就是這兩種加起來,zzz,建議使用的時(shí)候用flex-flow,而不要單一寫
2.4 justify-content屬性
justify-content: flex-start | flex-end | center | space-between | space-around;
這里與之對應(yīng)的是,開始,結(jié)束,居中,空白在之間,空白包圍項(xiàng)目.
2.5 align-items
XXX:flex-start:側(cè)軸的起點(diǎn)對齊
lex-end:側(cè)軸的終點(diǎn)對齊
center:側(cè)軸的中點(diǎn)對齊
baseline:項(xiàng)目的第一行文字的基線對齊
stretch(默認(rèn)值):如果項(xiàng)目沒有設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度
2.6 align-content屬性
align-content 屬性定義了多根軸線的對齊方式赵辕。如果項(xiàng)目只有一根軸線废亭，該屬性不起作用邻遏。
XXX:flex-start:與側(cè)軸的起點(diǎn)對齊
flex-end:與側(cè)軸的終點(diǎn)對齊
center:與側(cè)軸的中心點(diǎn)對齊
space-between:與側(cè)軸兩端對齊,軸線之間的間隔平均分布.
space-around:每根軸線兩側(cè)的間隔都相等.所以,軸線之間的間隔比軸線與邊框的間隔大一倍
strech(默認(rèn)值):軸線占滿整個(gè)側(cè)軸,塞滿,就是這個(gè)意思
3.項(xiàng)目的屬性,容器內(nèi)部項(xiàng)目的屬性
對應(yīng)參數(shù):order flex-grow flex-shrink flex-basis flex align-self
3.1 order屬性
order屬性定義項(xiàng)目排列順序.數(shù)值越小,排列越靠前,默認(rèn)為0
3.2 flex-grow 屬性(擴(kuò)展比例)
flex-grow屬性定義項(xiàng)目的放大比例酿箭，默認(rèn)為0栏笆，即如果存在剩余空間，也不放大做入。
如果所有項(xiàng)目的flex-grow屬性都為1冒晰，則它們將等分剩余空間（如果有的話）。
如果一個(gè)項(xiàng)目的flex-grow屬性為2竟块，其他項(xiàng)目都 為1壶运，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍
3.3 flex-shrink 屬性(收縮率)
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1浪秘，即如果空間不足蒋情，該項(xiàng)目將縮小。
如果所有項(xiàng)目的flex-shrink屬性都為1耸携，當(dāng)空間不足時(shí)棵癣，都將等比例縮小。
如果一個(gè)項(xiàng)目的flex-shrink屬性為0夺衍，其他項(xiàng)目都為1狈谊，則空間不足時(shí)，前者不縮小刷后。(注:負(fù)值對該屬性無效)
3.4 flex-basis 屬性
flex-basis屬性定義了在分配多余空間之前的畴，項(xiàng)目占據(jù)的主軸空間（main size）。
瀏覽器根據(jù)這個(gè)屬性尝胆，計(jì)算主軸是否有多余空間丧裁。它的默認(rèn)值為auto，即項(xiàng)目的本來大小含衔。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）煎娇，則項(xiàng)目將占據(jù)固定空間。
3.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫贪染，默認(rèn)值為0 1 auto缓呛。
后兩個(gè)屬性可選.建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性.
3.6 align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式杭隙，可覆蓋align-items屬性哟绊。
默認(rèn)值為auto，表示繼承父元素的align-items屬性痰憎，如果沒有父元素票髓，則等同于stretch。
變量:auto flex-start flex-end center baseline stretch
4.一些實(shí)際簡單應(yīng)用,以及代碼.
4.1骰子
一點(diǎn)
（骰子圖片均來自原網(wǎng))
重要代碼
兩點(diǎn)
重要代碼
三點(diǎn)
重要代碼
四點(diǎn)
重要代碼
五點(diǎn)
源網(wǎng)沒有圖,這里,自己搞的就不弄什么陰影漸變圓角了....
重要代碼
六點(diǎn)
重要代碼
4.2流式布局
流式布局,就是每個(gè)項(xiàng)目固定,但是會自動分行
重要代碼
注：這是我之前在微信公眾號‘雨后的夢溪筆談’ （yuhou5206）寫的一篇文章铣耘，今天移至簡書洽沟，原創(chuàng)文章轉(zhuǎn)載請注明。
(此節(jié)完)
