Flex布局語(yǔ)法
塊級(jí)元素 display : flex;
行內(nèi)元素 display : inline-flex;
1、flex-direction屬性
flex-direction ? 決定主軸的方向（即項(xiàng)目的排列方向）
flex-direction ：row-reverse ?(會(huì)改變item的排列方向 改為 從右到左的順序 ? 主軸仍然是水平方向)
flex-direction ：row (默認(rèn) item從左到右的順序排列) 主軸為水平方向，起點(diǎn)在左端、右端
flex-direction ：column 會(huì)改變主軸方向 改成垂直方向 是從上到下的順序
flex-direction ：column-reverse 會(huì)改變順序 改成從下到上的順序 主軸還是垂直方向
2、flex-wrap屬性
?flex-wrap屬性定義了如果一條軸線排不下，如何換行
nowrap（默認(rèn)）：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方
不加換行屬性會(huì)出現(xiàn)下面場(chǎng)景：如果父元素盒子的總寬度小于子元素寬度的總和，子元素設(shè)置的寬高一樣，應(yīng)該是正方形，不加換行就會(huì)出現(xiàn)列表自動(dòng)給寬度自適應(yīng)成盒子寬度的總長(zhǎng)度
加換行屬性如下，變成正常的大小
總結(jié)：flex-flow是復(fù)合屬性：是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap可以寫(xiě)成
flex-flow:column wrap，取兩個(gè)屬性的值即可 只寫(xiě)一個(gè)值 另一個(gè)就是默認(rèn)值
3、 justify-content屬性
justify-content 定義了項(xiàng)目在主軸上的對(duì)齊方式
justify-content：flex-start（默認(rèn)值）：左對(duì)齊
justify-content：flex-end：右對(duì)齊
justify-content：center： 居中 就算有margin也會(huì)把整個(gè)子元素居中，并且左右兩邊的距離邊框的大小相等
justify-content：space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等
justify-content：space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
justify-content: space-evenly;項(xiàng)目之間左右的間距以及項(xiàng)目和邊框之間的間距 都相等，會(huì)受到子元素設(shè)置margin的影響
4、align-items屬性
align-items 定義項(xiàng)目在交叉軸上對(duì)齊方式
align-items：?flex-start：交叉軸的起點(diǎn)對(duì)齊 默認(rèn)值
align-items：flex-end：交叉軸的終點(diǎn)對(duì)齊
align-items：center：交叉軸的中點(diǎn)對(duì)齊
?align-items：baseline: 項(xiàng)目的第一行文字的基線對(duì)齊
align-items：stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
5、align-content屬性
align-content 定義了多根軸線的對(duì)齊方式
flex-start ?與交叉軸的起點(diǎn)對(duì)齊
flex-end ? ?與交叉軸的終點(diǎn)對(duì)齊
center ?與交叉軸的中點(diǎn)對(duì)齊
space-between ? 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布
space-around ? ?每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（默認(rèn)值） ? ?軸線占滿整個(gè)交叉軸 ★ 子元素不設(shè)置高度或者高度auto
align-content 對(duì)比align-items 前者是將多根軸線當(dāng)做一個(gè)整體實(shí)現(xiàn)居中，后者將每個(gè)軸線單個(gè)當(dāng)做一個(gè)整體居中
5、 order屬性
order 定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0
6、align-self屬性
align-self: auto | flex-start | flex-end | center ?| stretch;
交叉軸上的對(duì)齊方式，允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性 ★在多根軸線下設(shè)置無(wú)效
7、 flex復(fù)合屬性
flex: flex-grow flex-shrink flex-basis
flex-grow?定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。主要作用是：分配剩余空的，?flex-grow:1;表示把剩余的空間都充滿，如果每個(gè)項(xiàng)目都設(shè)置flex-grow:1不要使用flex-wrap進(jìn)行換行
flex-shrink用來(lái)表示是否被壓縮 默認(rèn)值是1 表示被壓縮，改成0表示不被壓縮 保持設(shè)置的尺寸
flex-basis默認(rèn)值是auto flex-basis優(yōu)先級(jí)比width要高，同時(shí)設(shè)置，只會(huì)展示flex-basis的寬度
