彈性盒子模型：可以簡潔，完整，響應式(自適應)的實現(xiàn)各種頁面布局
display: flex;
容器（display: flex;）和項目：采用flex布局的元素，稱為flex容器，他的所有子元素稱為flex項目
主軸：元素盒子排列的方向（默認的排列方向x軸，當然不是說主軸就是x，因為我們可以通過屬性來改變主軸的方向）
交叉軸：和主軸垂直的軸
注： 容器屬性：給容器的屬性（一下的屬性全部給容器）
1、flex-direction改變主軸的方向。
屬性值有四種情況：
{flex-direction: row;}/*默認值，從左往右排列*/
{flex-direction: row-reverse;}/*從右往左排列*/
{flex-direction: column;}/*從上往下排列*/
{flex-direction: column-reverse;}/*從下往上排列*/
2、flex-wrap控制容器是單行還是多行
屬性值有三種情況：
{flex-wrap: nowrap; } /*默認值，不換行，會壓縮，不會超出父級*/
{flex-wrap: wrap; } /*換行*/
{flex-wrap: wrap-reverse; } /*只是單純的上下反轉(zhuǎn)，不是序號改變*/
如下：
image.png
3、復合屬性：flex-flow:direction wrap 復合屬性包括主軸方向 和換行
例：
{flex-flow: row-reverse wrap; }//換行反向X軸
如圖：
image.png
4、justify-content定義在主軸上的對齊方式
屬性值五種：
flex-start //默認值，從主軸開始部分開始排列(說白了就是左對齊)
flex-end //從主軸結(jié)束部分開始排列（說白了是右對齊）
center //居中
space-between // 兩端對齊，中間有相等的間隔
space-around //環(huán)繞對齊，每個項目兩邊的間隔相等
效果如下：
image.png
image.png
image.png
image.png
image.png
5、align-items定義彈性盒子項目在交叉軸上如何對齊
align-items: stretch; //默認值，交叉軸上沿對齊
align-items: flex-end; //交叉軸下沿對齊
align-items: center; // 交叉軸中部對齊
align-items: baseline; //項目里面的文字的基線對齊
附：沿基線對齊效果
image.png
6、align-content定義了多根主軸對齊方式，如果項目自有一根軸線，則不起作用（交叉軸的對齊方式）
屬性值六種：
stretch //默認值，主軸線占滿整個交叉軸（每行元素下沿都有一個主軸，且每行主軸的高度相等
flex-start //與交叉軸上沿緊密對齊
flex-end //與交叉軸下沿緊密對齊
center //居中
space-between // 與交叉軸兩端對齊，中間主軸寬度平均分配
space-around //環(huán)繞對齊，，中間主軸寬度平均分配
附圖：
image.png
image.png
image.png
image.png
image.png
image.png
