一族檬、基本概念
采用 Flex 布局的元素硬鞍，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"酷勺。它的所有子元素自動(dòng)成為容器成員本橙，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"脆诉。
在 Flexbox 模型中甚亭，有三個(gè)核心概念：
– flex 項(xiàng)（注：也稱 flex 子元素），需要布局的元素
– flex 容器击胜，其包含 flex 項(xiàng)
– 排列方向（direction）亏狰，這決定了 flex 項(xiàng)的布局方向
二、容器屬性
2.1 flex-direction:
row（默認(rèn)值）：主軸為水平方向偶摔，起點(diǎn)在左端暇唾。
row-reverse：主軸為水平方向，起點(diǎn)在右端辰斋。
column：主軸為垂直方向策州，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向宫仗，起點(diǎn)在下沿够挂。
2.2 flex-wrap:
nowrap（默認(rèn)）：不換行。
wrap：換行藕夫，第一行在上方孽糖。
wrap-reverse：換行枯冈，第一行在下方。
2.3 flex-flow 是flex-direction和flex-wrap的縮寫(xiě)形式办悟，默認(rèn)值為：flex-flow: row wrap;
2.4 justify-content:
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊霜幼，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等誉尖。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍铸题。
2.5 align-items:
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è)容器的高度烘挫。
2.6 align-content:
定義了多根軸線的對(duì)齊方式诀艰，如果項(xiàng)目只有一根軸線，那么該屬性將不起作用
flex-start：與交叉軸的起點(diǎn)對(duì)齊饮六。
flex-end：與交叉軸的終點(diǎn)對(duì)齊其垄。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊卤橄，軸線之間的間隔平均分布绿满。
space-around：每根軸線兩側(cè)的間隔都相等。所以窟扑，軸線之間的間隔比軸線與邊框的間隔大一倍喇颁。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
三嚎货、項(xiàng)目屬性
!項(xiàng)目屬性.png](https://upload-images.jianshu.io/upload_images/27974573-b62f9706fc9fa9cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
這是容器內(nèi)要布局的元素的屬性
3.1 order
數(shù)值越小橘霎，排列越靠前，默認(rèn)是0
3.2 flex-grow屬性
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)目將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項(xiàng)目的flex-shrink屬性都為1嵌灰，當(dāng)空間不足時(shí)弄匕，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0沽瞭，其他項(xiàng)目都為1迁匠，則空間不足時(shí)，前者不縮小驹溃。
負(fù)值對(duì)該屬性無(wú)效城丧。
3.4 flex-basis定義項(xiàng)目占據(jù)的主軸空間。(如果主軸為水平豌鹤，則設(shè)置這個(gè)屬性亡哄，相當(dāng)于設(shè)置項(xiàng)目的寬度。 原width將會(huì)失效布疙。)
3.5 flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)蚊惯，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選灵临。
此屬性有兩個(gè)快捷設(shè)置：auto=(1 1 auto)/none=(0 0 auto)
3.6 align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式截型，可覆蓋align-items屬性。默認(rèn)值為auto儒溉，表示繼承父元素的align-items屬性菠劝，如果沒(méi)有父元素，則等同于stretch睁搭。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
