一、介紹

flex是flexible box的縮寫，意為彈性布局。flexible box是CSS3新增加的，用來為盒模型提供最大的靈活性。

1. flex旨在提供一個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。

2. flex的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示設備和屏幕尺寸）的能力。

二、規范

1. flex布局由于歷史原因，分成舊版本(display: box;)，混合版本(display: flexbox;)，新版本(display: flex;)

    2009年7月 工作草案 (display: box;)
    2011年3月 工作草案 (display: flexbox;)
    2011年11月 工作草案 (display: flexbox;)
    2012年3月 工作草案 (display: flexbox;)
    2012年6月 工作草案 (display: flex;)
    2012年9月 候選推薦 (display: flex;)
   
    后續講解均用新版本——display: flex;
   

三、主要思想

因為flex布局是一個模塊，而不是一個單一的屬性，所以涉及很多東西。其中有一些是容器上的屬性（父元素，也被稱為“flex容器”），而有一些是容器子元素上的屬性（常稱為“flex項目”）

下面用一張圖來解釋其主要思想

基本上，Flex項目是沿著main axis(從main-start向main-end)或者cross axis(從cross-start向cross-end)排列。

1. main axis:Flex容器的主軸主要用來配置Flex項目。注意，它不一定是水平，這主要取決于flex-direction屬性。

2. main-start | main-end:Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。

3. main size:Flex項目的在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。

4. cross axis:與主軸垂直的軸稱作側軸，是側軸方向的延伸。

5. cross-start | cross-end:伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。

6. cross size:Flex項目的在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是width或height屬性，由哪一個對著側軸方向決定。

四、專業術語

flex容器屬性

1.伸縮容器display：定義一個Flex容器，根據其取的值來決定是內聯元素inline-flex還是塊級元素flex。

.display {
        display: flex;                //塊級元素
        display: inline-flex;                        //內聯元素
    }

2.伸縮流方向flex-direction：定義Flex項目在Flex容器中排列的方向。

.flex-direction {
        flex-direction: row;                //（默認值）從左向右排列（書寫方式以left、center、right標準），即水平方向
        flex-direction: row-reverse;        //從右向左排列（書寫方式以left、center、right標準），即反向水平
        flex-direction: column;                //從上到下排列，即垂直方向
        flex-direction: column-reverse;        //從下向上排列，即反向垂直
    }

3.伸縮換行flex-wrap：規定伸縮項目是否沿著側軸排列

.flex-wrap {
        flex-wrap: nowrap;                //（默認值）單行顯示，即不換行
        flex-wrap: wrap;                //多行顯示（書寫方式以left、center、right標準），即內聯元
        flex-wrap: wrap-reverse;        //反向多行顯示（書寫方式以left、center、right標準），即反轉換行
    }

4.伸縮流方向和換行flex-flow：是flex-direction和flex-wrap兩個屬性的縮寫

.flex-flow {
        flex-flow: row nowrap;            //（默認值）中間用空格隔開
    }

5.主軸對齊justify-content：控制flex容器內項的水平對齊方式

.justify-content {
        justify-content: flex-start;        //（默認值）伸縮項目向一行的起始位置靠齊
        justify-content: flex-end;            //伸縮項目向一行的結束位置靠齊
        justify-content: center;            //伸縮項目向一行的中間位置靠齊（如果剩余空間是負數，則保持兩端溢出的長度相等）
        justify-content: space-between;        //伸縮項目會平均地分布在行里
        justify-content: space-around;        //伸縮項目會平均地分布在行里，兩端保留一半的空間
    }

6.側軸對齊align-items：控制flex容器內項的垂直對齊方式

.align-items {
        align-items: flex-start;        //伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊
        align-items: flex-end;            //伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊
        align-items: center;            //伸縮項目的外邊距盒在該行的側軸上居中放置。（如果伸縮行的尺寸小于伸縮項目，則伸縮項目會向兩個方向溢出相同的量）
        align-items: baseline;            //如果伸縮項目的行內軸與側軸為同一條，則該值和flex-start等效
        align-items: stretch;            //（默認值）如果側軸長度屬性的值為auto，則此值會使項目的外邊距盒的尺寸在遵照min/max-width/height屬性的限制下盡可能接近所在行的尺寸。
    }

7.堆棧伸縮行align-content：當伸縮容器的側軸還有多余空間時，用來調準伸縮行在伸縮容器里的對齊方式

.align-content {
        align-content: flex-start;        //各行向伸縮容器的起點位置堆疊
        align-content: flex-end;        //各行向伸縮容器的結束位置堆疊
        align-content: center;            //各行向伸縮容器的中間位置堆疊
        align-content: space-between;    //各行在伸縮容器中平均分布
        align-content: space-around;    //各行在伸縮容器中平均分布，在兩邊各有一半的空間
        align-content: stretch;            //（默認值）各行將會伸展以占用剩余的空間
    }
//次屬性在伸縮項目有多行時才會生效

flex項目屬性

8.order：控制Flex項目的順序源
根據order重新排序伸縮項目。有最小（負值最大）order的伸縮項目排在第一個。若有多個項目有相同的order值，這些項目照文件順序排。

.order {
        order: <number>;        //默認按文檔源的流順序排列
    }

9.伸縮性flex：是flex-grow擴展比例，flex-shrink收縮比例和flex-basis伸縮基準值三個屬性的縮寫（flex-shrink和flex-basis是可選值）

`flex-grow`：擴展比例

`flex-shrink`：收縮比例

`flex-basis`：伸縮基準值

.flex {
        flex-grow: <number>（默認值是0）;
        flex-shrink: <number>（默認值是1）;
        flex-basis: <length>（默認值是auto）;
    }
/*縮寫   常用值*/
.flex｛
        flex：none    //等于flex-grow:0;flex-shrink:0;flex-basis:auto;
        flex：auto    //等于flex-grow:1;flex-shrink:1;flex-basis:auto;
        flex：0 auto    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;（初始值）
        flex：initial    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;（初始值）
｝

注意：float，clear和vertical-align屬性在Flex項目中無效

（部分信息借鑒于《圖截CSS3——核心技術與案例實戰》不得不說這是本好書，茂茂就是看這個學的）

歡迎各位打賞點贊哦！！！我會更加努力的！！！