一、css的布局模式
css2.1中定義了四種布局模式，由一個盒與其兄弟、祖先盒的關系決定其尺寸與位置的算法。
- 塊布局：呈現文檔的布局模式
- 行內布局：呈現文本的布局模式
- 表格布局：用格子呈現2D數據的布局模式
- 定位布局：定位元素的布局模式，定位元素基本與其它元素無關
css3引入的布局模式flexbox布局，主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度（甚至順序），以最佳的方式填充可用空間（主要是為了適應所有類型的顯示設備和屏幕大?。?。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間，或縮小他們以防止溢出容器。
二、Flexbox模型的功能
Flexbox布局對于設計比較復雜的頁面非常有用，可輕松地實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變。同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。
特點：
- 屏幕和瀏覽器窗口大小發生改變也可以靈活地調整布局
- 指定伸縮項目沿著主軸或側軸按比例分配額外的空間，從而調整伸縮項目的大小
- 指定伸縮項目沿著主軸或側軸將伸縮容器額外的空間，分配到伸縮項目之前、之后或之間。
- 指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍
- 控制元素在頁面上的布局方向
- 按照不同于文檔對象模型（DOM）所指定的排序方式對屏幕上的元素重新排序
三、Flexbox模型中的術語
1、主軸和側軸
伸縮布局偏向使用伸縮流的方向。
1）主軸、主軸方向：用戶代理沿著一個伸縮容的主軸配置伸縮項目，主軸是主軸方向的延伸。它不一定是水平的，主要取決于justify-content屬性。
2）主軸起點、主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
3）主軸長度、主軸長度屬性：伸縮項目在主軸方向的寬度或高度就是項目的主軸長度
4）側軸、側軸方向：與主軸垂直的軸稱作側軸，側軸是側軸方向的延伸，主要取決于主軸方向。
5）側軸起點、側軸終點：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
6）側軸長度、側軸長度屬性：伸縮項目在側軸方向的寬度和高度就是項目的側軸長度
2、伸縮容器和伸縮項目
通過display屬性給一個元素設置為flex或者inline-flex，這個容器就是一個伸縮容器。伸縮容器會為其內容創立新的伸縮格式化上下文，其中設置為flex的容器被渲染為塊級元素，設置為inline-flex的容器渲染為行內元素。若元素display的指定值是inline-flex且元素是一個浮動或絕對定位元素，則display的計算值是flex。
一個伸縮容器內具有零個以上的伸縮項目，伸縮容器的每個子元素都會成為一個伸縮項目，且用戶代理會將任何直接在伸縮容器里的連續文字塊包起來成為匿名伸縮項目。
3、伸縮容器的屬性
Flexbox伸縮布局中伸縮容器和伸縮項目是伸縮布局模塊中的重要部分，其中每一部分都具有各自的屬性。
1）伸縮流方向：指伸縮容器的主軸方向，決定了伸縮項目放置在伸縮容器的方向。主要通過flex-direction屬性設置，默認值為row。
2）伸縮行換行：主要用來設置伸縮容器的伸縮項目是單行顯示還是多行顯示，以及決定側軸的方向。通過flex-wrap屬性設置伸縮項目是否換行，默認值為nowrap。
3）伸縮方向與換行：是伸縮流方向與伸縮換行的縮寫，決定了伸縮容器的主軸與側軸，通過flex-flow同時設定了伸縮流方向和伸縮換行兩個屬性。
4）主軸對齊：用來設置伸縮容器當前行伸縮項目在主軸方向的對齊方式，指定如何在伸縮項目之間分布伸縮容器的額外空間。
5）側軸對齊：定義伸縮項目在伸縮容器的當前行的側軸對齊方式，類似于主軸對齊。
6）堆棧伸縮行：用來定義伸縮容器中伸縮項目行在側軸的對齊方式，類似于側軸對齊，只不過是用來控制伸縮項目行在布局軸的堆放方式。
4、伸縮項目的屬性
一個伸縮項目是一個伸縮容器的子元素，伸縮容器的文本也被視為一個伸縮項目。
伸縮項目都有一個主軸長度和側軸長度，主軸長度是伸縮項目在主軸上的尺寸，側軸長度是伸縮項目在側軸的尺寸。一個伸縮項目的寬度和高度取決于伸縮容器的軸。
1）顯示順序：伸縮容器中的伸縮項目默認顯示順序遵循文檔在源碼中出現的先后順序（DOM結構中的先后順序）?？梢酝ㄟ^伸縮項目的顯示順序修改伸縮項目在頁面中的顯示順序，也可以通過這個屬性對伸縮項目進行排序組合。
2）側軸對齊：包含兩種，一種是align-items屬性，用來設置伸縮容器中包括匿名伸縮項目的所有項目的對齊方式；另一種是align-self屬性，用來在單獨的伸縮項目上覆寫默認的對齊方式。對于匿名的伸縮項目，align-self的值與其關聯的伸縮容器的align-items的值相同。
3）伸縮性：定義伸縮項目可改變他們的寬度或高度填補可用的空間，可將伸縮容器的額外空間分發給其伸縮項目（與伸縮項目的正彈性成正比）或將他們縮小以防止伸縮項目溢出（與伸縮項目的負彈性成正比）。
5、伸縮行
伸縮項目沿著伸縮容器內的一個伸縮行定位，伸縮容器可以是單行的，也可以是多行的。主要由flex-wrap決定。
四、Flexbox模型的基本使用
1、伸縮容器display
語法：display:flex|inline-flex
參數說明：
- flex：將一個容器設置為塊伸縮容器
- inline-flex：將一個容器設置為內聯 伸縮容器
注意：設為 Flex 布局以后，css的columns在伸縮容器上將失效；子元素的float、clear和vertical-align屬性將失效。
2、伸縮流方向flex-direction
flex-direction適用于伸縮容器，就是伸縮項目的父元素。主要用來創建主軸，從而定義了伸縮項目放置在伸縮容器的方向。
語法：
flex-direction：row|row-reverse|column|column-reverse
參數說明：
- row：在ltr排版方式下從左到右排列，在rtl排版方式下從右向左排列（默認值）
- row-reverse：與row排列方向相反
- column：類似于row，不過是從上到下排列
- column-reverse：類似于row-reverse，不過是從下到上排列
3、伸縮換行flex-wrap
flex-wrap屬性適用于伸縮容器，也就是伸縮項目的父元素，主要用來定義伸縮容器里是單行還是多行顯示，側軸的方向，決定了新行堆放的方向。
語法：flex-wrap:nowrap|wrap|wrap-reverse
參數說明：
- nowrap：伸縮容器單行顯示，ltr排版下，伸縮項目從左到右排列；rtl排版下，伸縮項目從右向左排列（默認值）
- wrap：伸縮容器多行顯示，ltr排版下，伸縮項目從左到右排列；rtl排版下伸縮項目從右向左排列。
- wrap-reverse：伸縮容器多行顯示，ltr排版下，伸縮項目從右向左排列；rtl排版下，伸縮項目從左往右排列（與wrap相反）
4、伸縮流方向與還換行flex-flow
flex-flow適用于伸縮容器，也就是伸縮項目的父元素，是flex-direction和flex-wrap屬性的縮寫版本，同時定義了伸縮容器的主軸和側軸，默認值為row nowrap。
語法：flex-flow:flex-direction|flex-wrap
5、主軸對齊justify-content
主軸對齊justify-content適用于伸縮容器，也就是伸縮項目的父元素，主要用來定義伸縮項目沿著主軸線的對齊方式。
當一行的所有伸縮項目都不能伸縮或可伸縮但已經達到其最大長度時，這一屬性才會對伸縮容器額外的空間進行分配。當伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些限制。
語法：justify-content:flex-start|flex-end|center|space-between|space-around
參數說明：
- flex-start：伸縮項目向一行的起始位置靠齊
- flex-end：伸縮項目向一行的結束位置靠齊
- center：伸縮項目向一行的中間位置靠齊
- space-between：伸縮項目會平均的分布在行里
- space-around：伸縮項目會平均地分布在行里，兩端保留一半的空間
示例鏈接：justify-content
6、側軸對齊align-items和align-self
設置伸縮項目在側軸的對齊方式有兩種：一種是伸縮項目行在側軸的對齊方式，主要由屬性align-items控制；另一種是伸縮項目自身在側軸的對齊方式，主要由屬性align-self控制。
align-items和justify-content相呼應。align-items調整伸縮項目在側軸上的定位方式，主要用來定義伸縮項目可以在伸縮容器的當前行的側軸對齊方式。
align-self屬性主要是用來設置單獨伸縮項目在側軸的對齊方式，可以用來覆蓋該伸縮項目的伸縮容器的align-items屬性，屬性值和align-items一樣。
語法：align-items:flex-start|flex-end|center|baseline|stretch
參數說明：
- flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始邊
- flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點邊
- center：伸縮項目的外邊距盒在該行的側軸上居中放置
- baseline：伸縮項目根據伸縮項目的基線對齊
- stretch：默認值，伸縮項目拉伸填充整個伸縮容器。
示例鏈接：align-items ???? align-self
7、堆棧伸縮行align-content
align-content屬性會更改flex-wrap的行為，和align-items相似，但不是對齊伸縮項目，它對齊的是伸縮行。
align-content屬性主要用來調準伸縮行在伸縮容器里的對齊方式。
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch
參數說明：
- flex-start：各行向伸縮容器的起點位置堆疊
- flex-end：各行向伸縮容器的結束位置堆疊
- center：各行向伸縮容器的中間位置堆疊
- space-between：各行在伸縮容器中平均分布
- space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間
- stretch：默認值，各行將會伸展以占用額外的空間
示例鏈接：align-content
提示：這個屬性只有伸縮項目有多行時才生效，這種情況只有display的flex-wrap為wrap時，并且沒有足夠的空間把伸縮項目行放在同一行中。這個屬性將對每一行起作用，而不是每個伸縮項目。
8、伸縮性flex
flex屬性是讓伸縮項目可伸縮，讓伸縮項目的寬度和高度自動填充伸縮容器額外的空間。一個伸縮容器會等比地按照各伸縮項目的擴展比率分配額外的空間，也會按照收縮比率縮小各伸縮項目以避免伸縮項目溢出伸縮容器。
flex屬性可以用來指定可伸縮長度的部件，擴展比率、收縮比率、以及伸縮基準值。
當一個元素是伸縮項目時，flex屬性將代替主軸長度屬性決定元素的主軸長度；若元素不是伸縮項目，則flex屬性沒有效果。
語法：flex:none|flex-grow|flex-shrink|flex-basis
- flex-grow:<number>(默認值為0)，設置伸縮項目占伸縮容器的額外空間的份數
- flex-shink：<number>(默認值為1)，用來定義伸縮項目收縮的能力
- flex-basis：<length>|auto(默認值auto)，設置伸縮項目的伸縮基準值
9、顯示順序order
默認狀態下，元素是按照文檔流的結構順序排列，可以通過order屬性來改變伸縮項目出現在原文檔的次序。
語法：order：<number>
order屬性透過將伸縮項目分到有序號的組以控制伸縮項目的順序。伸縮容器會從序號最小的組開始布局，在同一個組里伸縮項目依據源文檔里的次序布局。
