Flex布局

布局的傳統(tǒng)方案是基于盒模型,依賴display屬性+float屬性+position屬性.但是對(duì)于那些特殊布局非常不方便,比如垂直居中就不容易實(shí)現(xiàn).

于是在2009提出來了彈性盒模型就是display:box;
然后在2012年在此基礎(chǔ)上又升級(jí)了一套新標(biāo)準(zhǔn)就是：Flex

我相信Flex布局將會(huì)成為未來布局的首選方案

(一)Flex布局基本概念

1.前提

使用Flex布局必須遵循一個(gè)前提就是父元素必須加上display:flex;設(shè)為Flex布局以后,子元素的float,clear,和vertical-align屬性講全部失效

2.容器與項(xiàng)目

• 父元素設(shè)置為Flex容器后,我們稱為Flex容器,簡(jiǎn)稱"容器"。
• 他的所有子元素自動(dòng)成為容器成員爬橡，稱為Flex項(xiàng)目莉擒。簡(jiǎn)稱"項(xiàng)目"
• 容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start恋博，結(jié)束位置叫做main end齐佳；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end交播。
• 項(xiàng)目默認(rèn)沿主軸排列重虑。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size秦士。
  效果見下圖:

項(xiàng)目與容器.png

3.容器的屬性

容器的屬性有6大類缺厉，但是可以合并為3類

• flex-direction:決定主軸的方向（項(xiàng)目排列的方向）
• flex-wrap:超出后是否換行
• flex-flow:就是上兩個(gè)的綜合,速記
• justify-content:項(xiàng)目在主軸的橫軸對(duì)齊方式
• align-items:項(xiàng)目在主軸的縱軸對(duì)齊方式
• align-content:需要和flex-wrap一起使用。他表示超出后形成的2行在縱軸對(duì)齊方式

3.1flex-direction:決定主軸的方向即項(xiàng)目排列的反向

.box{display:flex;flex-direction:row|row-reverse|column|column-reverse;}

• row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端.
• row-reverse:主軸為水平方向,起點(diǎn)在右端
• column:主軸為垂直方向,起點(diǎn)在上端
• column-reverse:主軸為垂直方向,起點(diǎn)在下端

具體效果看下圖:

direction.png

3.2 flex-wrap屬性.超出一行后,是否換行

.box{flex-wrap:nowrap||wrap||wrap-reverse;}

• nowrap(默認(rèn)):不換行
• wrap:換行,第一行在上方
• wrap-reverse:最后一行在上方隧土，第一行在最下方

3.3 flex-flow屬性是上面的flex-direction和flex-wrap的屬性的簡(jiǎn)寫方式,默認(rèn)值就是 row nowrap

.box{flex-flow:<flex-direction>||<flex-wrap>}

3.4 justify-content定義了項(xiàng)目在主軸橫軸的對(duì)齊方式

.box{justify-content:flex-start||flex-end||center||space-between||space-around}

• flex-start:(默認(rèn)值)左端對(duì)齊
• flex-end:右端對(duì)齊
• center:居中
• space-between:兩端對(duì)齊,項(xiàng)目之間的間隔都相等
• space-around:每個(gè)項(xiàng)目的間隔都相等,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
  具體見下圖:

項(xiàng)目對(duì)齊方式.png

3.5 align-items:定義項(xiàng)目在豎軸如何對(duì)齊

.box{align-items:flex-start||flex-end||center||stretch||baseline}

• flex-start: 頂端對(duì)齊
• flex-end:尾端對(duì)齊
• center:居中對(duì)齊
• stretch:(默認(rèn))如果項(xiàng)目沒有設(shè)置高度提针，那么將沾滿整個(gè)容器的高度
• baseline:項(xiàng)目第一行的文字的基線對(duì)齊

效果圖如下:

豎軸對(duì)齊.png

3.6 align-content定義了多行對(duì)齊的方式，如果項(xiàng)目只有一行曹傀，則該屬性不會(huì)起作用

.box{align-content:flex-start||align-end||center||stretch||space-between||space-around}

效果圖見下:

多行對(duì)齊.png

4.項(xiàng)目

• order:自定義項(xiàng)目的順序
• flex-grow:默認(rèn)是0關(guān)閉辐脖。后面接數(shù)字表示橫軸分了多少份
• flex-shrink:默認(rèn)是1.允許縮放。后面接數(shù)字皆愉。表示橫軸縮小了多少份嗜价。
• flex-basis:表示項(xiàng)目基礎(chǔ)值
• flex: grow值 shrink值 basis基礎(chǔ)值。(速記版本)
• align-self:只單個(gè)項(xiàng)目的縱軸幕庐。不影響其他項(xiàng)目

4.1 order屬性定義了項(xiàng)目的排列順序久锥，數(shù)值越小,排名越靠前默認(rèn)是0，要是值一樣則看HTMLDOM順序

li{order:4;}

4.2 flex-grow可以理解為項(xiàng)目占得份數(shù)或者放大比例,如果存在剩余空間异剥。也不放大

.box{flex-grow:<number>||默認(rèn)是0}

如果所有的項(xiàng)目flex屬性都是1瑟由，那么他們將等分剩余空間。如果一個(gè)項(xiàng)目的flex-grow屬性為2.其他項(xiàng)目都是1冤寿，則前者占據(jù)的剩余空間比其他項(xiàng)目多一倍歹苦。

flex-grow.png

4.3flex-shrink屬性表示縮小的比例。默認(rèn)就是1督怜，如果空間不足殴瘦。。那么該項(xiàng)目將自動(dòng)縮小

.box{flex-shrink:<number>||默認(rèn)是1}

如果項(xiàng)目的flex-shrink屬性都為1亮蛔，當(dāng)空間不足的時(shí)候痴施，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都是1辣吃，則空間不足动遭，前者不縮小.
具體見下圖:

縮小.jpg

4.4 flex-basis屬性即項(xiàng)目的本來大小

.box{flex-basis:100px||百分比||em||rem||auto默認(rèn)就是auto}

4.5 flex屬性是flex-grow,flex-shrink,flex-basis的簡(jiǎn)寫,默認(rèn)值就是 0 1 auto,后兩個(gè)可選

.box{flex:none|[flex-grow] [flex-shrink] [flex-basis]}

該屬性有2個(gè)快捷值: auto(1 1 auto)和none(0 0 auto)

4.6 align-self允許單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋

.box{align-self: auto | flex-start | flex-end | center | baseline | stretch;}
auto:他會(huì)遵循父元素

效果圖如下:

單個(gè)項(xiàng)目.png

總結(jié)

簡(jiǎn)單來說父元素有4個(gè)屬性

• flex-flow
• justify-content
• align-items
• align-content
  子元素有3個(gè)屬性:
• order
• flex
• align-self

到此Flex布局全部結(jié)束神得。

下面這些屬于題外話了主要就是弄清楚FLEX的寬度是怎么計(jì)算的
舉個(gè)例子
有3個(gè)FLEX項(xiàng)目對(duì)應(yīng)的數(shù)值是 flex: 3 1 200px; flex: 2 2 300px;flex: 1 3 600px;
現(xiàn)在有2種情況
當(dāng)他們的父元素是1000px的時(shí)候這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)項(xiàng)目元素的總寬度大于了1000px 因?yàn)?00+300+600=1100>1000超出了100PX
那么他用到的就是shrink
他先獲取壓縮總的數(shù)據(jù) 1200+2300+3600 = 2600
1200/2600100=7.6px; 再用基準(zhǔn)值200-7.6=192.4就是項(xiàng)目1實(shí)際的寬度
2300px/2600100 = 23px ; 再用基準(zhǔn)值300-23 = 277px 就是項(xiàng)目2的實(shí)際寬度
3600/2600100 = 69px; 再用基準(zhǔn)值600-69 = 531px 就是項(xiàng)目3的實(shí)際寬度
第二種情況要是他們的父元素是1200px,也就是子元素的所有基準(zhǔn)值加在一起小于父元素的寬度
200+300+600 = 1100<1200 實(shí)際寬度比總和小100PX
這個(gè)時(shí)候看的就是flex-grow了 3+2+1=6 相當(dāng)于他分了6份了
項(xiàng)目一的寬度就是 100/63 =50 然后再用項(xiàng)目一的基準(zhǔn)值+50 = 200+50 = 250

項(xiàng)目二的寬度就是 100/6*2 = 33再利用項(xiàng)目二的基準(zhǔn)值+33 = 300+33 = 333
項(xiàng)目三的寬度就是100/6*1 = 16.6 再利用項(xiàng)目三的基準(zhǔn)值+16.6 = 600+16.6 = 617px

用的最多的

• flex: 0 1 300px;表示的就是不用鋪滿厘惦，允許伸縮，寬度或者是高度最低300px
• 父元素要是flex-flow:column nowrap;那么子元素的flex:0 1 300px; 這里的300px就是最低的高度
• 父元素要是flex-flow:row nowrap;那么子元素的flex:0 1 300px; 這里的300px就是最低的寬度