一、Flex布局是什么？

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

彈性盒子：flex布局 1.彈性盒子是一種布局方式 2.特點：改變盒子的排列方式

采用flex布局的元素，稱為flex容器? ，它的所有子元素自動成為容器成員，稱為flex項目

在沒有flex布局之前因為div是一個塊級元素獨占一行

得到的效果如下圖

這樣會使頁面的布局很難放在一起：這時flex布局就起到了做用

首先將父元素轉(zhuǎn)化成彈性盒子，這樣子盒子就會默認占一行：display:flex;

效果如上圖

flex布局中的flex-direction:主軸，交叉軸方向：定義彈性元素的排列方向及順序 flex-direction里面的值來定義主軸和交叉軸

flex-direction:row;? 默認值，表示主軸是水平方向?

?? flex-direction：row-reverse ;表示主軸是水平反向? ?當(dāng)給父元素設(shè)置成水平反向就會得到以下效果

flex-direction：column;表示主軸是垂直正向??當(dāng)給父元素設(shè)置成垂直正向就會得到以下效果

? ? ? ? flex-direction：column-reverse;表示主軸是垂直反向??當(dāng)給父元素設(shè)置成垂直反向就會得到以下效果

定義是否換行，及換行方式：flex-wrap:

flex-wrap:nowrap;默認值，不換行? ? 不換行就會得到如下效果 壓縮子元素的寬度

?? ? flex-wrap:wrap;表示換行，默認交叉軸正向換行

flex-wrap:wrap-reverse;表示換行 ，默認交叉軸反向換行

子元素在主軸方向的對齊方式：justify-content:flex-start:默認值，開始方向?qū)R

justify-content:flex-end? 結(jié)束方向?qū)R? ?給父元素設(shè)置justify-content:flex-end? 就會得到下面效果：

?justify-content:?center;? 居中對齊???給父元素設(shè)置justify-content:center? 就會得到下面效果：

?justify-content:space-between; 兩端對齊，項目之間的間隔都相等???給父元素設(shè)置justify-content:space-between? 就會得到下面效果：

justify-content：space-aroud; 每個項目兩側(cè)的間隔都相等。所以項目之間的間隔比項目與邊框的間隔大一倍。

給父元素設(shè)置justify-content:space-aroud? 就會得到下面效果：

子元素在交叉軸方向上的對齊方式 開始方向?qū)R align-items:flex-start?

?結(jié)束方向?qū)R align-items:flex-end

居中對齊? align-items:center;? ?

?項目的第一行文字的基線對齊：algn-items：baseline;

默認值：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度： algn-items：stretch;

多行子元素在交叉軸方向上的對齊方式：開始對齊方式：align-content:flex-start?

給父元素設(shè)置?align-content:flex-start? 得到下面效果

?結(jié)束方向?qū)R:align-content:flex-end??給父元素設(shè)置?align-content:flex-end? 得到下面效果

居中對齊align-content:center;? ? ?給父元素設(shè)置?align-content:center 得到下面效果

?兩端對齊，項目之間的間隔都相等align-content:space-between

每個項目兩側(cè)的間隔都相等。所以項目之間的間隔比項目與邊框的間隔大一倍。align-content:space-aroud

默認值 會拉伸容器內(nèi)的每個項目占用的空間，填空方式為給每個項目增加空白，占滿整個交叉軸 align-content:stretch;

設(shè)置彈性元素的順序：order:默認值0 元素按照order 屬性的值的增序進行布局

值越小排列越靠前，擁有相同order 屬性值的元素按照它們在源代碼中出現(xiàn)的順序進行布局

設(shè)置彈性元素的擴展比率來分配剩余空間：? flex-grow:0；未設(shè)置默認為0

設(shè)置彈性元素的收縮比率來收縮空間? ? flex-shrink:1（默認值1）

元素收縮空間公式：? 1.多出來的尺寸? 2.總權(quán)重：元素1尺寸*收縮比率+元素2尺寸*收縮比率

3.收縮空間：元素尺寸*收縮比率*多出來的尺寸/總權(quán)重