Flex(Flexible box)，意為彈性布局用來為盒裝模型提供最大的靈活性。
我們可以從以下幾個方面來簡單的介紹flex布局的特點：
1，塊級布局側重垂直方向，行內布局側重水平方向削彬。但flex布局是與方向無關的。
2秀仲，使用flex布局可以實現(xiàn)空間的自動分配融痛，自動對齊。
3啄育，flex布局用于簡單的線性布局酌心，而更復雜的布局地交給grid布局。
任何一個容器都可以指定flex布局挑豌，例：
.box{
display:flex;
...
}
行內元素也可以使用flex布局安券。
.box{
display:inline-flex;
...
}
我們可以把使用flex布局的整體叫做Flex container，容器氓英。他的子元素稱Flex item侯勉，項目。
容器里有主軸（main axis）铝阐、交叉軸（cross axis）址貌，單個項目占據的主軸空間叫main size，單個項目占據的交叉軸空間叫cross size徘键。
一练对，F(xiàn)lex container(容器)的6個屬性
1，flex-direction 屬性決定主軸的方向吹害，即項目的排列方向螟凭。有4個值分別是：
- row 主軸為水平方向，起點從左端開始（默認值）它呀；
- row-reverse 水平方向螺男，方向反轉棒厘；
- column 垂直方向，從上往下下隧；
- column-reverse 垂直方向奢人，方向反轉。
2淆院，flex-wrap 屬性定義項目如何換行何乎。有3個值。
- nowrap（默認值） 不換行迫筑；
- wrap 換行宪赶，第一行在上方；
- wrap-reverse 換行脯燃，第一行在下。
3蒙保，flex-flow 屬性是以上兩種屬性的簡寫形式辕棚。如：
flex flow:<flex-direction> || <flex-wrap>
4，justify-content 屬性定義了項目在主軸上的對齊方式邓厕。有5個值：
- flex-start 左對齊逝嚎；
- flex-end 右對齊；
- center 居中
- space-between 兩端對齊详恼，項目之間間隔相等补君；
- space-around 每個項目兩側的間隔相等，所以項目之間的間隔比項目與邊框的間隔大一倍昧互。
5挽铁，align-items 屬性定義項目在交叉軸上如何對齊，有5個值：
- flex-start 交叉軸的起點對齊敞掘；
- flex-end 交叉軸終點對齊叽掘；
- center 交叉軸中點對齊；
- stretch(默認值) 如果項目未設置高度或沒auto玖雁，那么將占滿整個容器的高度更扁；
- baseline 項目的第一行文字的基線對齊。
6赫冬，align-content 屬性定義多根軸線的對齊方式浓镜，有6個值：
- flex-start 與交叉軸的起點對齊；
- flex-end 與交叉軸的終點對齊劲厌；
- center 與交叉軸中點對齊膛薛；
- space-between 與交叉軸兩端對齊，軸線之間間隔平均分布脊僚；
- space-around 每根軸線兩側的間隔相等相叁，所以軸線之間的間隔比軸線與邊框的間隔大一倍遵绰；
- stretch(默認值) 軸線占滿交叉軸。
二增淹，F(xiàn)lex item(項目)的6個屬性
- order屬性定義了項目的排列順序椿访，數(shù)值越小排列越前面，默認值為0虑润；
- flex-grow屬性定義了項目的增長比例成玫，默認為0，即如果存在剩余空間也不給放大拳喻；如果一個項目的flex-grow屬性值為2哭当，其他兩個項目都為1，那么前者占據的剩余空間將比其他兩個多一倍冗澈。
- flex-shrink 屬性定義了項目的收縮比例钦勘。如果所有項目的flex-shrink屬性都為1，當空間不足時亚亲，都將等比例縮小彻采。如果一個項目的flex-shrink屬性為0，其他項目都為1捌归，則空間不足時肛响，前者不縮小。
- flex-basis屬性定義了在分配多余空間之前惜索，項目占據的主軸空間（main size）特笋。瀏覽器根據這個屬性，計算主軸是否有多余空間巾兆。它的默認值為auto猎物，即項目的本來大小。
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫臼寄，默認值為0 1 auto霸奕。后兩個屬性可選。
- align-self屬性允許單個項目有與其他項目不一樣的對齊方式吉拳，可覆蓋align-items屬性质帅。默認值為auto，表示繼承父元素的align-items屬性留攒，如果沒有父元素煤惩，則等同于stretch。
