Flex布局
布局的傳統(tǒng)方案是基于盒模型,依賴display屬性+float屬性+position屬性.但是對(duì)于那些特殊布局非常不方便,比如垂直居中就不容易實(shí)現(xiàn).
于是在2009提出來(lái)了彈性盒模型就是display:box;
然后在2012年在此基礎(chǔ)上又升級(jí)了一套新標(biāo)準(zhǔn)就是：Flex
我相信Flex布局將會(huì)成為未來(lái)布局的首選方案
(一)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）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。
- 項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
效果見(jiàn)下圖:
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)在下端
具體效果看下圖:
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)目與邊框的間隔大一倍
具體見(jiàn)下圖:
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)目沒(méi)有設(shè)置高度，那么將沾滿整個(gè)容器的高度
- baseline:項(xiàng)目第一行的文字的基線對(duì)齊
效果圖如下:
3.6 align-content定義了多行對(duì)齊的方式，如果項(xiàng)目只有一行，則該屬性不會(huì)起作用
.box{align-content:flex-start||align-end||center||stretch||space-between||space-around}
效果圖見(jiàn)下:
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)目多一倍。
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，則空間不足，前者不縮小.
具體見(jiàn)下圖:
4.4 flex-basis屬性即項(xiàng)目的本來(lái)大小
.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ì)遵循父元素
效果圖如下:
總結(jié)
簡(jiǎn)單來(lái)說(shuō)父元素有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
