前言
flex 布局是前端重要且常用的一種布局方式，提供的屬性并不多囚聚，但是概念很重要援奢，需要多加練習(xí)才能熟練運(yùn)用
基本概念
- 采用 Flex 布局的元素挚躯，稱為 Flex 容器（flex container），簡(jiǎn)稱“容器”形葬。它的所有子元素自動(dòng)成為容器成員合呐，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱“項(xiàng)目”笙以。
- 容器默認(rèn)存在兩根軸淌实，分別為水平的主軸（main axis）和垂直的交叉軸（cross axis）。
- 主軸的開(kāi)始位置叫做 main start猖腕，結(jié)束位置叫做 main end拆祈。
- 交叉軸的開(kāi)始位置叫做 cross start，結(jié)束位置叫做 cross end倘感。
- 項(xiàng)目默認(rèn)沿主軸排列放坏。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size
如下圖所示
通過(guò)將元素的 display 屬性設(shè)置為 flex（生成塊級(jí) flex 容器）或 inline-flex（生成類似 inline-block 的行內(nèi)塊級(jí) flex 容器）侠仇。當(dāng)一個(gè)元素設(shè)置了 Flex 布局以后轻姿，其子元素的 float、clear 和 vertical-align 等屬性將失效
根據(jù)作用范圍的不同逻炊，flex屬性分為以下兩大類:
容器屬性：
flex-direction互亮、flex-wrap、flex-flow余素、justify-content豹休、align-items、align-content
項(xiàng)目屬性：
order桨吊、align-self威根、flex、flex-grow视乐、flex-shrink洛搀、flex-basis
容器屬性
flex-direction
flex-direction 屬性用來(lái)決定主軸的方向（即項(xiàng)目的排列方向），屬性的可選值如下：
flex-wrap
flex-wrap 屬性用來(lái)設(shè)置當(dāng)彈性盒子的子元素（項(xiàng)目）超出父容器時(shí)是否換行佑淀，屬性的可選值如下：
flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 兩個(gè)屬性的簡(jiǎn)寫留美，語(yǔ)法格式如下：
flex-flow: flex-direction flex-wrap;
jusitify-content
justify-content 屬性用于設(shè)置彈性盒子中元素在主軸（橫軸）方向上的對(duì)齊方式，屬性的可選值如下：
align-items
align-items 屬性用來(lái)設(shè)置彈性盒子中元素在側(cè)軸（縱軸）方向上的對(duì)齊方式，屬性的可選值如下：
align-content
align-content 屬性與 justify-content 屬性類似谎砾，可以在彈性盒子的側(cè)軸還有多余空間時(shí)調(diào)整容器內(nèi)項(xiàng)目的對(duì)齊方式逢倍，單行無(wú)效，作用于多行景图，屬性的可選值如下：
項(xiàng)目屬性
order
order 屬性用來(lái)設(shè)置項(xiàng)目在容器中出現(xiàn)的順序较雕，您可以通過(guò)具體的數(shù)值來(lái)定義項(xiàng)目在容器中的位置，屬性的語(yǔ)法格式如下：
align-self
align-self 屬性允許您為某個(gè)項(xiàng)目設(shè)置不同于其它項(xiàng)目的對(duì)齊方式挚币，該屬性可以覆蓋 align-items 屬性的值亮蒋。align-self 屬性的可選值如下：
flex
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三個(gè)屬性的簡(jiǎn)寫妆毕，語(yǔ)法格式如下：
flex: flex-grow flex-shrink flex-basis;
參數(shù)說(shuō)明如下：
● flex-grow：（必填參數(shù)）一個(gè)數(shù)字宛蚓，用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的增長(zhǎng)量，默認(rèn)值為 0设塔；
● flex-shrink：（選填參數(shù)）一個(gè)數(shù)字凄吏，用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的收縮量，默認(rèn)值為 1闰蛔；
● flex-basis：（選填參數(shù)）項(xiàng)目的長(zhǎng)度痕钢，合法值為 auto（默認(rèn)值，表示自動(dòng)）序六、inherit（表示從父元素繼承該屬性的值） 或者以具體的值加 "%"任连、"px"、"em" 等單位的形式例诀。
另外随抠，flex 屬性還有兩個(gè)快捷值，分別為 auto（1 1 auto）和 none（0 0 auto）繁涂。
除了可以使用 flex 屬性外拱她，您也可以使用 flex-grow、flex-shrink扔罪、flex-basis 幾個(gè)屬性來(lái)分別設(shè)置項(xiàng)目的增長(zhǎng)量秉沼、收縮量以及項(xiàng)目長(zhǎng)度
