第一章：簡介
Flex：FlexiableBox（彈性盒，伸縮盒）
它是css中又一種布局手段，它主要用來代替?zhèn)鹘y(tǒng)浮動來進行頁面布局
css布局的傳統(tǒng)解決方案：基于盒子模型，使用display屬性 +position屬性 +float屬性。對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。
2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了大部分瀏覽器的支持，特別是在移動端開發(fā)，flex布局是一種很常用的布局手段，是每一個前端開發(fā)者必須掌握的技能
第二章：概念
flex布局中有兩個非常重要的概念：彈性容器和彈性元素
彈性容器
? ? ?- 要使用彈性盒，必須先將一個元素設(shè)置為彈性容器
? ? ?- 我們通過 display 來設(shè)置彈性容器
? ? ? ? ? ?display:flex? 設(shè)置為塊級彈性容器
? ? ? ? ? ?display:inline-flex 設(shè)置為行內(nèi)彈性容器
彈性元素
? ? ? ? - 彈性容器的子元素是彈性元素（也稱做彈性項）
? ? ? ? - 一個元素可以同時是彈性容器和彈性元素
主軸和側(cè)軸(輔軸)的概念
主軸：彈性元素的排列方向稱為主軸，主軸有可能是水平的，有可能是垂直的，主軸有一個方向，有可能是自左向右，有可能自上向下....
側(cè)軸：與主軸垂直方向的稱為側(cè)軸?
第三章：樣式
彈性布局的樣式總共分為兩類：一個專門給彈性容器設(shè)置，一類專門給彈性元素設(shè)置
學(xué)習(xí)第一個彈性容器的樣式屬性
flex-direction 用來指定容器中彈性元素的排列方式
可選值：
row 默認值，彈性元素在容器中水平排列（左向右）
? ? ?- 主軸 自左向右
row-reverse 彈性元素在容器中反向水平排列（右向左）
? ? ?- 主軸 自右向左
column 彈性元素縱向排列（自上向下）
? ? ?- 主軸 自上向下
column-reverse 彈性元素反向縱向排列（自下向上）
? ? ?- 主軸 自下向上
學(xué)習(xí)兩個彈性元素的樣式屬性
flex-grow?
????- 指定彈性元素的伸展的系數(shù)，默認是0
????- 當(dāng)父元素有多余的空間時，子元素如何伸展
????- 父元素的剩余空間，會按照比例進行分配
flex-shrink?
? ? - 指定彈性元素的收縮系數(shù)
????- 當(dāng)父元素中的空間不足以容納所有的子元素時，如何對子元素進行收縮，默認值是1
? ? - 這兩個屬性可以分別給每個子元素設(shè)置
利用彈性盒做一個簡單的導(dǎo)航條
彈性容器的樣式
flex-wrap:
設(shè)置彈性元素是否在彈性容器中自動換行
可選值：
????nowrap?默認值，元素不會自動換行
????wrap?元素沿著輔軸方向自動換行
????wrap-reverse?表示元素沿著輔軸反方向換行
flex-flow
wrap?和?direstion?的簡寫屬性（可以同時設(shè)置兩個屬性并且沒有順序要求）
例如：flex-flow:wrap row;? ? 設(shè)置子元素在水平方向自左向右排列，并且當(dāng)父元素寬度不足以容納子元素時子元素自動換行
justify-content
-?如何分配主軸上的空白空間（主軸上的元素如何排列）
-?可選值：
????fiex-start?元素沿著主軸的起邊排列
????flex-end?元素沿著主軸的終邊排列
????center?元素居中排列
????space-around?空白分布到元素兩側(cè)
????space-between?空白均勻分布到元素間
????space-evenly?空白分布到元素的單側(cè)
align-items
? -?元素在輔軸上如何對齊
? -?元素間的關(guān)系
? ?-?可選值
? ? ????stretch?默認值，將元素的長度設(shè)置為相同的值（會拉伸元素）
? ? ????flex-start?元素不會拉伸，沿著輔軸起邊對齊
? ? ????flex-end?沿著輔軸終邊對齊
? ? ????center?居中對齊
? ? ????baseline?基線對齊（用得很少）
align-content（屬性值和justify-content的屬性值一樣）
? ? -?如何分配輔軸上的空白空間（輔軸上的元素如何排列）
? ? -?可選值：
? ? ? ? fiex-start?元素沿著輔軸的起邊排列
? ? ? ? flex-end?元素沿著輔軸的終邊排列
? ? ? ? center?元素居中排列
? ? ? ? space-around?空白分布到元素兩側(cè)
? ? ? ? space-between?空白均勻分布到元素間
? ? ? ? space-evenly?空白分布到元素的單側(cè)
這里摻雜一個彈性元素的屬性
align-self
- 用來覆蓋當(dāng)前彈性元素上的align-items，取值和align-items一樣
????stretch?默認值，將元素的長度設(shè)置為相同的值（會拉伸元素）
????flex-start?元素不會拉伸，沿著輔軸起邊對齊
????flex-end?沿著輔軸終邊對齊
????center?居中對齊
????baseline?基線對齊（用得很少）
彈性元素的樣式
彈性元素的樣式相對于彈性容器來說就比較簡單了
align-self?
????前面已經(jīng)介紹了，這里就省略了
flex-grow
? ? 彈性的增長系數(shù)，默認值是0，不增長
flex-shrink
? 彈性元素的縮進系數(shù)，默認值是1
? ? ? ?-?縮減系數(shù)的計算方式比較復(fù)雜
? ? ? ?-?縮減多少是根據(jù)縮減系數(shù)和元素大小來計算
flex-basis?
????????指定的是元素在主軸上的基礎(chǔ)長度
????????如果主軸是?橫向的?則該值指定的就是元素的寬度
????????如果主軸是?縱向的?則該值指定的就是元素的高度
??????????-?默認值是?auto，表示參考元素自身的高度或?qū)挾?/p>
??????????-?如果傳遞了一個具體的值，則以該值為準(zhǔn)
?。。?flex-basis? ? ? ?flex-shrink? ? ?flex-grow這三個屬性就類似彈簧的三種狀態(tài)：靜止、收縮和拉伸
flex?
? ?可以設(shè)置彈性元素所有的三個樣式
? ?flex?增長?縮減?基礎(chǔ);
? ?initial?"flex:?0?1?auto"
? ?auto?"flex:?1?1?auto"
? ?none?"flex:?0?0?auto"?彈性元素沒有彈性
? ? ?。?！注意一點：flex：1和flex-grow:1之間的是有區(qū)別的
????flex:1會設(shè)置flex-basis：0，也就是說元素設(shè)置flex屬性，它的寬度或者高度就會變成0
? ? 而flex-grow:1不會設(shè)置flex-basis，flex-basis的值還是默認的auto
order?
? ? ? ? - 決定彈性元素的排列順序
????????-?可以通過order來影響元素的排列順序，這是一個非常強大的功能
????????-?有了它之后，我們就不需要通過結(jié)構(gòu)去調(diào)整元素的順序
????????-?只需要通過order這個屬性就可以改變元素的順序
第四章：總結(jié)
flex布局可以很方便實現(xiàn)網(wǎng)頁元素的布局，可以搭配百分比，rem等來實現(xiàn)各類布局，是一種可以代替?zhèn)鹘y(tǒng)浮動布局的手段，整體知識點不難，只是屬性較多，彈性容器和彈性元素分別都有六個屬性，以及它們各自的取值，需要多加練習(xí)才能掌握
也可以參考阮一峰老師的這篇博客教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
