彈性布局(flexble box)模塊指在提供一個更加有效的方式來布置，對齊和分部在容器之間的各項內(nèi)容，即使它們的大小是未知或者動態(tài)變化的。它的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間(主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸)的能力。
Flexbox是一個整體模塊，而不是單一的一個屬性，它涉及到了很多東西，包括它的整個屬性集，所有它需要在父容器設(shè)置也有的需要在子控件設(shè)置。
基本上 伸縮項目是沿著主軸(main axis),從主軸起點(main start)到主軸終點(main end)或者沿著側(cè)軸(cross axis),從側(cè)軸起點(cross-start)到側(cè)軸終點(cross-end)排列
- 主軸(main axis)：伸縮容器的主軸，伸縮項目主要沿著這條軸進(jìn)行排列布局。它的(水平或者垂直)方向取決于"justify-start"屬性
- 主軸起點(main start)和主軸終點(main end)：伸縮項目防止在伸縮容器內(nèi)從主軸起點向主軸終點的方向
- 主軸尺寸(mian size): 伸縮項目在主軸方向的寬度或者高度就是主軸的尺寸。伸縮項目主要的大小屬性主要是寬度，高度，主要取決于那一個對著主軸方向決定
- 側(cè)軸(cross axis):垂直于主軸成為側(cè)軸。它的方向主要取決于主軸方向。
- 側(cè)軸起點(cross start)和側(cè)軸終點(cross end): 伸縮行的配置從容器的側(cè)軸起點邊開始到終點邊結(jié)束
- 側(cè)軸尺寸(cross size):伸縮項目在側(cè)軸方向的寬度或者高度就是項目的側(cè)軸長度，伸縮項目的側(cè)軸屬性由哪一個對著側(cè)軸方向決定
屬性介紹
display: flex | inline-flex (適用于父類容器元素上)
定義：一個flex容器，內(nèi)聯(lián)或者根據(jù)指定的值，來作用于下面的子類容器。
- box 將對象作為彈性伸縮顯示
- inline-box 講對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
- flexbox 講對象作為彈性伸縮盒顯示
- inline-flexbox講對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
- flex 講對象作為彈性伸縮盒顯示 （目前使用的）
- inline-flex講對象作為內(nèi)聯(lián)塊級伸縮盒顯示《目前使用的）
1.css 列（CSS columns）在彈性盒子中不起作用
2.float, clear and vertical-align 在flex項目中不起作用
flex-direction (適用于父類容器的元素上)
定義：設(shè)置或檢索伸縮盒對象的子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
- row 橫向從左向右排隊 默認(rèn)
- row-reverse 反轉(zhuǎn)橫向排列
- column 縱向排列
- column-reverse 反轉(zhuǎn)縱向排列 從后向前排列 最后一項拍在最前面
flex-wrap (適用于父類容器上)
定義:設(shè)置或檢索伸縮盒對象的子元素超出父容器時是否換行
flex-wrap: nowrap | wrap | wrap-reverse
- nowrap 當(dāng)子元素溢出父容器時不換行
- wrap 當(dāng)子元素溢出父容器時自動換行
- wrap-reverse 反轉(zhuǎn)wrap排列
flex-flow (適用于父類容器上)
定義：復(fù)合屬性。設(shè)置或檢索伸縮盒對象的子元素排列方式。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
- [flex-driection] 定義彈性盒子元素的排列方向
- [flex-wrap] 定義彈性盒子元素溢出父容器時是否換行
justify-content (適用于父類容器上)
定義： 設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時,這一屬性可協(xié)助對多余的控件經(jīng)行分配。 當(dāng)元元素溢出某行時,這一屬性同樣會在對齊上進(jìn)行控制
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start 彈性盒子元素講向行起始位置對齊。該行的第一個子元素的主起始位置的邊界與該行的主起始位置的邊界對齊
同時所有后續(xù)的伸縮項目于前一個項目對齊felx-end 彈性盒子元素將向行結(jié)束位置對齊。該行的子元素講相互對齊并在行中居中對齊,同時第一個元素與行的主起始位置的邊距等同于最后一個元素與行的主結(jié)束位置的邊距
center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結(jié)束位置的邊距（如果剩余空間是負(fù)數(shù)，則保持兩端相等長度的溢出）
space-between：彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個子元素，則該值等效于'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結(jié)束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。
space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個伸縮盒項目，則該值等效于'center'。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
align-items (適用于父類容器上)
定義：設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。
align-items: flex-start | flex-end | center | baseline | stretch
flex-start 彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠該行的側(cè)軸(縱軸)起始邊界
flex-end 彈性盒子元素的側(cè)軸 結(jié)束為止的邊界緊靠住父容器的側(cè)軸結(jié)束邊界
center:彈性盒子元素在該行的側(cè)軸上居中位置(如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline:如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與"flex-start"等效。其他情況下該值講參與基線對齊
-
stretch:如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
align-content (適用于父類容器上)
定義：設(shè)置或檢索彈性盒堆疊伸縮行的對齊方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：各行向彈性盒容器的起始位置堆疊。 彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行。
flex-end：各行向彈性盒容器的結(jié)束位置堆疊。 彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行。
center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊， 保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等。
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。 如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等， 同時第一行前面及最后一行后面的空間是其他空間的一半。
stretch：各行將會伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于'flex-start'。在其它情況下，剩余空間被所有行平分，以擴大它們的側(cè)軸尺寸
