除了 CSS 中傳統(tǒng)的布局系統(tǒng)之外披摄，CSS3還提供了一個新布局系統(tǒng)疚膊。在這個新的框模型中寓盗，框的子代采用水平或垂直布局傀蚌，而且可將未使用的空間分配給特定的子代蹭睡，或者通過“彈性”分配給應(yīng)展開的子代捐韩，在各子代間進(jìn)行分配。這些框的嵌套（水平嵌套在垂直中宪萄，或垂直嵌套在水平中）可用于在兩個維度中構(gòu)建布局拜英。
父容器屬性
display-flex
一個容器設(shè)置了display:flex;屬性就定義了一個flex容器聊记，它的直接子元素會接受這個flex環(huán)境。
.container {
display: flex;
}
flex-direction
設(shè)置或檢索伸縮盒對象的子元素在父容器中的位置：
1.row 默認(rèn)值狰右，水平從左到右
2.row-reverse 水平從右到左
3.column 垂直從上到下
4.column-reverse 垂直從下到上
如圖所示：
flex-wrap
設(shè)置或檢索彈性盒模型對象的子元素超出父容器時是否換行棋蚌，
默認(rèn)所有的flex item會嘗試放在一行中挨队，可以通過設(shè)置flex-wrap設(shè)置新行的方向
1.nowrap 默認(rèn)值盛垦，不換行
2.wrap 換行
3.wrap-reverse 換行腾夯，并且顛倒行順序
flex-flow
flex-direction 和 flex-wrap 的縮寫蔬充，默認(rèn)值row nowrap
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content
設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式饥漫，當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時庸队，這一屬性可協(xié)助對多余的空間進(jìn)行分配闯割。當(dāng)元素溢出某行時，這一屬性同樣會在對齊上進(jìn)行控制
1.flex-start 默認(rèn)值、彈性盒子元素將向行起始位置對齊
2.flex-end 彈性盒子元素將向行結(jié)束位置對齊
3.center彈性盒子元素將向行中間位置對齊鼓黔。該行的子元素將相互對齊并在行中居中對齊
4.space-between 彈性盒子元素會平均地分布在行里
5.space-around 彈性盒子元素會平均地分布在行里澳化，兩端保留子元素與子元素之間間距大小的一半
align-items
設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式
1.flex-start 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界缎谷。
2.flex-end彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界列林。
3.center 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置酪惭。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）砌创。
4.baseline 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條嫩实，則該值與flex-start等效甲献。其它情況下颂翼，該值將參與基線對齊。
5.stretch 如果指定側(cè)軸大小的屬性值為'auto'锥累，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸桶略，但同時會遵照'min/max-width/height'屬性的限制。
align-content
設(shè)置或檢索彈性盒堆疊伸縮行的對齊方式
1.flex-start 各行向彈性盒容器的起始位置堆疊惶翻。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界吕粗，之后的每一行都緊靠住前面一行颅筋。
2.flex-end 各行向彈性盒容器的結(jié)束位置堆疊议泵。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界桃熄，之后的每一行都緊靠住前面一行瞳收。
3.center 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊收夸，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等卧惜。
4.space-between 各行在彈性盒容器中平均分布夹纫。第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界茅姜，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等奋姿。
5.space-around 各行在彈性盒容器中平均分布称诗，兩端保留子元素與子元素之間間距大小的一半寓免。各行會按一定方式在彈性盒容器中排列计维，以保持兩兩之間的空間相等鲫惶，同時第一行前面及最后一行后面的空間是其他空間的一半欠母。
6.stretch 各行將會伸展以占用剩余的空間。剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸猜敢。
子元素屬性
order
在默認(rèn)情況下flex order會按照書寫順訓(xùn)呈現(xiàn)缩擂，可以通過order屬性改變胯盯，數(shù)值小的在前面博脑，還可以是負(fù)數(shù)
flex-grow
設(shè)置或檢索彈性盒的擴(kuò)展比率,根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來分配剩余空間
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink
設(shè)置或檢索彈性盒的收縮比率,根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
設(shè)置或檢索彈性盒伸縮基準(zhǔn)值，如果所有子元素的基準(zhǔn)值之和大于剩余空間疗杉，則會根據(jù)每項設(shè)置的基準(zhǔn)值烟具，按比率伸縮剩余空間
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
flex-grow, flex-shrink,flex-basis 的縮寫
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self
設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式，可以覆蓋父容器align-items的設(shè)置
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
