flex 布局
- flex 布局譯為彈性布局儒洛，用來為盒狀模型提供最大的靈活性
任何一個(gè)容器都可以指定為 flex 布局 - webkit 內(nèi)核 瀏覽器必須加上
-webkit
設(shè)為 flex 布局之后珠叔，子元素的 float\clear\vertical-align 屬性將失效
基本概念
- 采用 flex 布局的元素，稱為 flex (flex container)容器，簡(jiǎn)稱容器费什。他的所有子元素自動(dòng)稱為容器成員审孽，稱為 flex (flex item)項(xiàng)目，簡(jiǎn)稱項(xiàng)目
image.png
上圖利于理解 flex 布局屬性值
- 容器默認(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.
容器屬性
- 此處屬性為容器屬性衡蚂，即父盒子屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
- flex-direction 屬性決定主軸的方向窿克，即項(xiàng)目排列方向
.box{
flex-direction:row | row-reverse | column | column-reverse
}
row -- 主軸水平方向，起點(diǎn)在左端毛甲，是默認(rèn)值
row-reverse -- 主軸為水平方向年叮，起點(diǎn)在右端
column -- 主軸為垂直方向，起點(diǎn)在上方頂端
column-reverse -- 主軸為垂直方向玻募，起點(diǎn)在下方底端
image.png
從左到右依次：column-reverse,column,row,row-recverse
- flex-wrap 屬性
默認(rèn)情況下只损，項(xiàng)目都排在一條線上（軸線），flex-wrap屬性定義七咧，如果一條軸線排不下如何換行的作用
.box{
flex-wrap:nowrap | wrap | wrap-reverse
}
它可能取3個(gè)值
- nowrap -- 不換行跃惫，為默認(rèn)值
- wrap -- 換行，第一行在上方
image.png
- wrap-reverse -- 換行艾栋，第一行在下方
image.png
- flex-flow
flex-flow屬性是flex-direction和flex-wrap屬性的簡(jiǎn)寫形式爆存，默認(rèn)值為row nowrap
.box{
flex-flow: row || mowrap;
}
- justify-content 屬性
justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式
.box{
justify-content:flex-start | flex-end | center | space-between | space-around
}
image.png
它的可能取值為5個(gè)，具體對(duì)齊方式與軸的方向有關(guān)蝗砾。下面假設(shè)主軸為從左到右
flex-start -- 默認(rèn)值先较，左對(duì)齊
flex-end -- 右對(duì)齊
center -- 居中對(duì)齊
space-between -- 兩端對(duì)齊携冤，項(xiàng)目之間的間隔都相等
space-around -- 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以闲勺，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
- align-items 屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
.box{
align-items:flex-start | flex-end | center | baseline | stretch;
}
image.png
它的可能取值為5個(gè)曾棕，具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下
flex-start -- 交叉軸的起點(diǎn)對(duì)齊（上方）
flex-end -- 交叉軸的終點(diǎn)對(duì)齊 （下方）
center -- 交叉軸的中點(diǎn)對(duì)齊
baseline -- 項(xiàng)目的第一行文字的基線對(duì)齊
stretch -- 默認(rèn)值菜循，如果項(xiàng)目未設(shè)置高度或者設(shè)為 auto翘地，將占滿整個(gè)容器高度
- align-content
align-content屬性定義了多跟軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線债朵，該屬性不起作用
.box{
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
image.png
該屬性有6個(gè)取值
flex-start -- 與交叉軸的起點(diǎn)對(duì)齊
flex-end -- 與交叉軸的終點(diǎn)對(duì)齊
center -- 與交叉軸的中點(diǎn)對(duì)齊
space-between -- 與交叉軸兩端對(duì)齊子眶，軸線之間的間隔平均分布
space-around -- 每個(gè)軸線兩側(cè)的間隔都相等，所以序芦，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch -- 默認(rèn)值臭杰，軸線占滿整個(gè)交叉軸
項(xiàng)目屬性
以下六個(gè)屬性設(shè)置在項(xiàng)目上
order
flex-grow
flex-shrink
flex-basis
flex
align-self
-
order屬性定義項(xiàng)目的排列順序，數(shù)值越小谚中，排列越靠前渴杆，默認(rèn)為0
.item{
order : 1;
}
image.png
- flex-grow 屬性
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0宪塔，即如果存在剩余空間磁奖，也不放大
.item{
flex-grow:<number>
}
image.png
如果所有項(xiàng)目的flex-grow 屬性都為1，則他們將等分剩余空間（如果有的話）某筐。如果一個(gè)項(xiàng)目的 flex-grow 屬性為2比搭，其他項(xiàng)目都為1，則前者占據(jù)剩余空間將比其他項(xiàng)目多一倍
- flex-shrink 屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例南誊，默認(rèn)為1身诺，即如果空間不足，該項(xiàng)目將縮小
.item{
flex-shrink:<number>;
}
image.png
如果所有項(xiàng)目的 flex-shrink 屬性都為1抄囚，當(dāng)空間不足時(shí)霉赡，都將等比例縮小，如果一個(gè)項(xiàng)目的flex-shrink 屬性為0幔托，其他項(xiàng)目都為1穴亏，則空間不足時(shí)，前者不縮小重挑，負(fù)值無效
- flex-basis 屬性
flex-basis屬性定義了在分配多余空間之前嗓化，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性谬哀，計(jì)算主軸是否有多余空間刺覆，他的默認(rèn)值為auto，即項(xiàng)目的本來大小
.item{
flex-basis:<length> | auto;
}
它可以設(shè)為跟width和height屬性一樣的值，即項(xiàng)目將占據(jù)固定空間
- flex 屬性
flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫职恳，默認(rèn)值為0 1 auto后兩個(gè)屬性可選
.item{
flex: none | [<'flex-grow'> <'flex-shrink'> ? || <'flex-basis'>];
}
該屬性有兩個(gè)快捷值：auto(1 1 auto) 和 none(0 0 auto)
建議優(yōu)先使用這個(gè)屬性韧涨，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值
- align-self 屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式伦仍，可覆蓋align-items屬性。默認(rèn)值為auto,表示繼承父元素的align-items屬性很洋，如果沒有父元素充蓝，則等同于stretch
.item{
align-self:auto | flex-start | flex-end | center | baseline | stretch;
}
image.png
該屬性可能取6個(gè)值，除了 auto喉磁，其他都與 align-items 屬性完全一致
主軸未必是x軸谓苟，交叉軸則為垂直與主軸交叉的那個(gè)軸
