1.基本概念
采用Flex布局的元素，成為Flex容器展辞，它的所有子元素自動(dòng)成為容器成員奥邮。
2.容器的屬性
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
1.flex-direction 屬性
flex-direction 屬性決定主軸的方向（即項(xiàng)目的排列方向）。
.box{
flex-direction: row | row-reverse | column | column-reverse;
}
row(默認(rèn)值): 主軸為水平方向罗珍，起點(diǎn)在左端洽腺。
row-reverse: 主軸為水平方向，起點(diǎn)在右端覆旱。
column: 主軸為垂直方向蘸朋，起點(diǎn)在上方。
column: 主軸為垂直方向扣唱，起點(diǎn)在下方藕坯。
2.flex-wrap 屬性
默認(rèn)情況下，項(xiàng)目都排在一條線(又稱"軸線")上噪沙。flex-wrap屬性定義炼彪，如果一條軸線拍不下，如何換行正歼。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默認(rèn)): 不換行辐马。
wrap: 換行，第一行在上方局义。
wrap-reverse: 換行喜爷，第一行在下面冗疮。
3.flex-flow 屬性
flex-flow屬性時(shí)flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值是 row nowrap檩帐。
.box{
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content 屬性
justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式术幔。
.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默認(rèn)值): 主軸的開始方向?qū)R
flex-end: 主軸的結(jié)束方向?qū)R
center: 居中
space-between: 兩端對(duì)齊
space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等
5.align-items 屬性
align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box{
align-items: flex-start | flex-end | center | baseline |stretch;
}
flex-start: 交叉軸的起點(diǎn)對(duì)齊轿塔。
flex-end: 交叉軸的終點(diǎn)對(duì)齊特愿。
center: 交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊勾缭。
stretch(默認(rèn)值): 如果項(xiàng)目未設(shè)置高度或auto，將占滿整個(gè)容器的高度目养。
6.align-content 屬性
align-content 屬性定義了多根軸線的對(duì)齊方式俩由。如果項(xiàng)目只有一根軸線，該屬性不起作用癌蚁。
.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start: 與交叉軸的起點(diǎn)對(duì)齊幻梯。
flex-end: 與交叉軸的終點(diǎn)對(duì)齊。
center: 與交叉軸的中點(diǎn)對(duì)齊努释。
space-between: 與交叉軸兩端對(duì)齊碘梢，軸線之間的間隔平均分布。
space-around: 沒跟軸線兩側(cè)的間隔都相等伐蒂。
stretch(默認(rèn)值): 軸線占滿整個(gè)交叉軸煞躬。
3.項(xiàng)目的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order 屬性
order 屬性定義項(xiàng)目的排列順序。數(shù)值越小逸邦，排列越靠前恩沛，默認(rèn)0。
2.flex-grow 屬性
flex-grow 屬性定義項(xiàng)目的放大比例缕减，默認(rèn)為0雷客，即如果存在剩余空間，也放不大桥狡。
3.flex-shrink 屬性
flex-shrink 屬性定義了項(xiàng)目的縮小比例搅裙，默認(rèn)為1，即如果空間不足裹芝，該項(xiàng)目將縮小部逮。
4.flex-basis 屬性
flex-basis 屬性定義了在分派多余空間之前，項(xiàng)目占據(jù)的主軸空間局雄。瀏覽器根據(jù)這個(gè)屬性甥啄，計(jì)算主軸是否有多余空間。
它的默認(rèn)值是auto炬搭，即項(xiàng)目本來大小蜈漓。
.item{
flex-basis: <length> | auto;
}
5.flex 屬性
flex 屬性時(shí) flex-grow,flex-shrink 和 flex-basis 的簡(jiǎn)寫穆桂，默認(rèn)值 0 1 auto 。后面兩個(gè)屬性可選融虽。
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6.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;
}
