一淑掌、Flex布局是什么呈昔？
Flex是Flexible Box的縮寫挥等，翻譯成中文就是“彈性盒子”，用來(lái)為盒裝模型提供最大的靈活性堤尾。任何一個(gè)容器都可以指定為Flex布局肝劲。
彈性盒子：flex布局 1.彈性盒子是一種布局方式 2.特點(diǎn)：改變盒子的排列方式
采用flex布局的元素，稱為flex容器? ，它的所有子元素自動(dòng)成為容器成員辞槐，稱為flex項(xiàng)目
在沒(méi)有flex布局之前因?yàn)閐iv是一個(gè)塊級(jí)元素獨(dú)占一行
這樣會(huì)使頁(yè)面的布局很難放在一起：這時(shí)flex布局就起到了做用
首先將父元素轉(zhuǎn)化成彈性盒子掷漱，這樣子盒子就會(huì)默認(rèn)占一行：display:flex;
flex布局中的flex-direction:主軸，交叉軸方向：定義彈性元素的排列方向及順序 flex-direction里面的值來(lái)定義主軸和交叉軸
flex-direction:row;? 默認(rèn)值榄檬，表示主軸是水平方向?
?? flex-direction：row-reverse ;表示主軸是水平反向? ?當(dāng)給父元素設(shè)置成水平反向就會(huì)得到以下效果
flex-direction：column;表示主軸是垂直正向??當(dāng)給父元素設(shè)置成垂直正向就會(huì)得到以下效果
? ? ? ? flex-direction：column-reverse;表示主軸是垂直反向??當(dāng)給父元素設(shè)置成垂直反向就會(huì)得到以下效果
定義是否換行卜范，及換行方式：flex-wrap:
flex-wrap:nowrap;默認(rèn)值，不換行? ? 不換行就會(huì)得到如下效果 壓縮子元素的寬度
?? ? flex-wrap:wrap;表示換行鹿榜，默認(rèn)交叉軸正向換行
flex-wrap:wrap-reverse;表示換行 海雪，默認(rèn)交叉軸反向換行
子元素在主軸方向的對(duì)齊方式：justify-content:flex-start:默認(rèn)值，開(kāi)始方向?qū)R
justify-content:flex-end? 結(jié)束方向?qū)R? ?給父元素設(shè)置justify-content:flex-end? 就會(huì)得到下面效果：
?justify-content:?center;? 居中對(duì)齊???給父元素設(shè)置justify-content:center? 就會(huì)得到下面效果：
?justify-content:space-between; 兩端對(duì)齊舱殿，項(xiàng)目之間的間隔都相等???給父元素設(shè)置justify-content:space-between? 就會(huì)得到下面效果：
justify-content：space-aroud; 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔都相等奥裸。所以項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
給父元素設(shè)置justify-content:space-aroud? 就會(huì)得到下面效果：
子元素在交叉軸方向上的對(duì)齊方式 開(kāi)始方向?qū)R align-items:flex-start?
?結(jié)束方向?qū)R align-items:flex-end
居中對(duì)齊? align-items:center;? ?
?項(xiàng)目的第一行文字的基線對(duì)齊：algn-items：baseline;
默認(rèn)值：如果項(xiàng)目未設(shè)置高度或設(shè)為auto沪袭，將占滿整個(gè)容器的高度： algn-items：stretch;
多行子元素在交叉軸方向上的對(duì)齊方式：開(kāi)始對(duì)齊方式：align-content:flex-start?
給父元素設(shè)置?align-content:flex-start? 得到下面效果
?結(jié)束方向?qū)R:align-content:flex-end??給父元素設(shè)置?align-content:flex-end? 得到下面效果
居中對(duì)齊align-content:center;? ? ?給父元素設(shè)置?align-content:center 得到下面效果
?兩端對(duì)齊湾宙，項(xiàng)目之間的間隔都相等align-content:space-between
每個(gè)項(xiàng)目?jī)蓚?cè)的間隔都相等。所以項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍枝恋。align-content:space-aroud
默認(rèn)值 會(huì)拉伸容器內(nèi)的每個(gè)項(xiàng)目占用的空間创倔，填空方式為給每個(gè)項(xiàng)目增加空白，占滿整個(gè)交叉軸 align-content:stretch;
設(shè)置彈性元素的順序：order:默認(rèn)值0 元素按照order 屬性的值的增序進(jìn)行布局
值越小排列越靠前焚碌，擁有相同order 屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局
設(shè)置彈性元素的擴(kuò)展比率來(lái)分配剩余空間：? flex-grow:0畦攘；未設(shè)置默認(rèn)為0
設(shè)置彈性元素的收縮比率來(lái)收縮空間? ? flex-shrink:1（默認(rèn)值1）
元素收縮空間公式：? 1.多出來(lái)的尺寸? 2.總權(quán)重：元素1尺寸*收縮比率+元素2尺寸*收縮比率
3.收縮空間：元素尺寸*收縮比率*多出來(lái)的尺寸/總權(quán)重
