一崎脉、Flex 容器

采用Flex布局的元素谭跨，稱為Flex容器（flex container）,簡(jiǎn)稱‘容器’丽声。它所有的子元素自動(dòng)成為容器成員蜕衡，稱為Flex項(xiàng)目（flex item）壤短，簡(jiǎn)稱‘項(xiàng)目’。任何一個(gè)元素都可以指定為Flex布局慨仿。

display:flex|inline-flex 定義彈性伸縮盒容器類型
flex將對(duì)象作為塊級(jí)彈性彈性盒模型久脯。
inline-flex將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性彈性盒模型。

注意镰吆，設(shè)為Flex布局之后帘撰，子元素的float、clear 和 vertical-align 屬性將失效万皿。

容器的屬性 以下6個(gè)屬性設(shè)置在flex 容器上

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-container.png

容器默認(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惩系。

1. flex-direction 排列盒子的方向

row(默認(rèn))：橫向從左往右排列（橫向）。
row-reverse: 對(duì)其方式與row相反如筛。（橫向）堡牡。
column: 縱向從上往下排列。（縱向）
column-reverse: 對(duì)其方式與 column 相反（縱向）杨刨。

排列盒子的方向.png

2.flex-wrap 換行方式

flex-wrap: nowrap| wrap| wrap-reverse
控制flex容器是單行顯示還是多行顯示晤柄，同時(shí)橫軸的方向決定了新行堆疊的方向。

nowrap(默認(rèn))： flex容器為單行拭嫁，不換行
wrap: flex為多行，超出換行
wrap-reverse: 反轉(zhuǎn)wrap 排列抓于。

（1）nowrap(默認(rèn))：不換行做粤。

nowrap.png

(2)wrap:換行，第一行在上方

wrap.png

(3)wrap-reverse: 換行捉撮，第一行在下方怕品。

wrap-reverse.png

3.flex-flow:

flex-flow: 屬性是flex-direction屬性 和 flex-wrap屬性 的簡(jiǎn)寫(xiě)形式，默認(rèn)值是（row nowrap）

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

justify-content: flex-start| flex-end| center| space-between| space-around.
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)目與邊框之間的間隔要大一倍炫乓。

justify-content.png

5.align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊

align-items: flex-start|flex-end| center| baseline| stretch(默認(rèn)).
flex-start: 交叉軸的起點(diǎn)對(duì)齊。
flex-end: 交叉軸的終點(diǎn)對(duì)齊献丑。
center: 交叉軸上居中對(duì)齊末捣。
baseline: 項(xiàng)目的第一行文字基線對(duì)其。
stretch(默認(rèn)值): 如果項(xiàng)目未設(shè)置寬高或者設(shè)為auto,將沿著交叉軸占滿整個(gè)容器的高度或者寬度创橄。

align-items.png

6.align-content 屬性定義了交叉多根（行）軸線的對(duì)齊方式箩做。如果項(xiàng)目只有一根軸線，該屬性不起作用妥畏。

align-content： flex-start| flex-end| center| space-between| space-around| stretch(默認(rèn)值);
flex-start: 與交叉軸的起點(diǎn)對(duì)齊邦邦。
flex-end: 與交叉軸的終點(diǎn)對(duì)其安吁。
center: 交叉軸上居中對(duì)齊。
space-between: 與交叉軸兩端對(duì)齊圃酵，軸線之間的間隔平均分布柳畔。
space-around: 每根軸線兩端的間隔都相等。所以郭赐，軸線之間的間隔比軸線與邊框之間的間隔大一倍薪韩。
stretch(默認(rèn)值)： 軸線占滿整個(gè)交叉軸。在設(shè)置了align-items后無(wú)效捌锭。

多行下的align-content 會(huì)使align-items失效

align-content.png

二俘陷、項(xiàng)目屬性

以下6個(gè)屬性將設(shè)置在項(xiàng)目上。

order: 項(xiàng)目排序观谦。
flex-grow: 項(xiàng)目拓展比例拉盾，或者說(shuō)項(xiàng)目放大比例。
flex-shrink: 項(xiàng)目縮小比例
flex-basis: 定義拓展剩余空間前豁状，的交叉軸的寬
flex： 復(fù)合屬性捉偏。
align-self：自定義項(xiàng)目的align-items

1. order屬性定義項(xiàng)目的排列順序。數(shù)值越小泻红，排列越靠前夭禽，默認(rèn)為0，可以為負(fù)值谊路。

order.png

2.flex-grow: <number> 定義項(xiàng)目的放大比例讹躯，（默認(rèn)為0）即如果存在剩余空間，也不放大

子元素的尺寸 = 父級(jí)盒子剩余空間尺寸*（子元素的box-grow屬性值／所有子元素的box-grow屬性值的和）

3.flex-shrink 屬性定義了項(xiàng)目的縮小比例缠劝，（默認(rèn)值為1）潮梯，即如果空間不足，該項(xiàng)目將縮小惨恭。

元素收縮寬度 = 超出寬度*（元素收縮比／收縮總比）

flex-shrink.png

4.flex-basis 屬性定義了在分配多余空間之前秉馏，項(xiàng)目占據(jù)的主軸空間（main size）,瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余的空間脱羡。它的默認(rèn)值為auto.

值: || auto| content
<length>: 用長(zhǎng)度來(lái)定義寬度沃饶。不允許負(fù)值。
<percentage>: 用百分比來(lái)定義寬度轻黑。不允許負(fù)值糊肤。
auto: 無(wú)特定的寬度值，取決于它的屬性值氓鄙，auto的計(jì)算規(guī)則是檢索一下你是否設(shè)置了 width(或者 height值馆揉，取決于 flex-direction， 就會(huì)采用這個(gè)值抖拦，否則的話升酣，最后使用的值是content)
content: 基于內(nèi)容自動(dòng)計(jì)算寬度

5.flex屬性是flex-grow flex-shrink 和 flex-basis 的簡(jiǎn)寫(xiě)舷暮，默認(rèn)值為 0 1 auto。后兩個(gè)屬性可選噩茄。

flex∠旅妗： none| ['flex-grow' 'flex-shrink'? || 'flex-basis']

該屬性有兩個(gè)快捷值 auto(0 1 auto)和 none( 0 0 auto)
建議優(yōu)先使用這個(gè)屬性，而不是使用三個(gè)分離的屬性绩聘，因?yàn)闉g覽器會(huì)推算相關(guān)值沥割。

6. align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items 屬性凿菩。默認(rèn)值為auto,表示繼承父元素的align-items屬性机杜，如果沒(méi)有父元素，則等同于 stretch.

align-self: auto(默認(rèn))| flex-start | flex-end | center| baseline | stretch.