**flex&多行布局**
盒模型
組成部分：content+padding+border+margin
1.標准的盒模型
常見的問題
margin值會錯誤解析
padding值會撐大盒子大小
計算方式：padding和border都是算在盒子的外部的
2.IE盒模型（怪異盒模型）：當文檔丟失了文檔類型的時候，在低版本的IE瀏覽器上，盒模型的計算方式發生了改變
特點：padding和border是長在寬高大小內的
padding值不會撐大容器的大小了
padding和border都是在盒子內的，不需要減去相應的值
計算方式：
自身大小 content（包含border和padding的）
實際大小 content（包含border和padding 的）+margin
屬性：box-sizing 設置盒子的顯示尺寸
content-box 標准盒模型
border-box 怪異盒模型 常用於移動端 pc端也可以使用
彈性盒
控制子級元素在父級元素上的排列位置
屬性：display
屬性值：flex
讓當前的父級區域形成彈性盒，給父級容器添加彈性盒屬性
彈性盒環境下，默認主軸是X軸 所有的子級元素默認都會沿着X軸進行排列
彈性盒中 主軸和側軸是相對應 默認主軸是X軸 側軸就是Y軸
在彈性盒環境下不考慮元素類型 所有的標簽都可以直接設置寬高大小
居中：
表格居中
文本居中
圖片居中
背景居中
定位居中
位移居中
計算屬性居中 calc
彈性盒居中：單個元素
magrin：auto
注意：
在彈性盒中浮動是不可以使用的
定位，盒模型（margin/padding）
彈性盒詳解
彈性盒中的屬性很多
添加到父級元素上的屬性 控制所有子級元素的排列位置
添加到子級元素上的屬性 控制單個子級元素的排列位置
1.改變主軸的方向（默認主軸是X軸）
屬性：flex-direction
屬性值：
重要的 row 行/水平 x軸
重要的 column 列/垂直 y軸
了解： row/column-reverse 默認主軸是x/y軸 順序是相反的
-
控制元素在主軸上的對齊方式
屬性：justify-content
屬性值：flex-start/end center
重要的屬性值
space-between 兩端對齊 其余空間自動分配
space-around 所有的空間都是自動分配的 左右空間是一樣的
space-evenly 所有的空間間距都是一樣大小
3.控制元素在側軸上的對齊方式
屬性：align-items
屬性值：flex-start/end
center；
拓展：基線對齊 baseline
當子級元素都設置寬高大小。設置baseline和flex-start效果一樣
基線對齊：文本元素 文本大小雖然不一樣 但是都在基線上對其顯示
4.彈性盒默認寬度超出是不會換行的 默認是進行擠壓的
換行屬性：flex-wrap
屬性值：
nowrap 不換行
wrap 換行
5.行與行之間的間距
屬性：align-content
屬性值：flex-start 行與行在開始的位置顯示 重點/常用
flex-end
center
space-between/around
添加在子級元素上的屬性
1.控制單個元素在側軸上的對齊方式
屬性：align-self
屬性值：flex-start/end
center
auto 繼承了父級的側軸對齊方式
父級有側軸對齊 就和父級效果一樣
父級沒有側軸對齊
stretch（拉伸）
2.排序優先級，數字越大越往后排，默認為0，支持負數
屬性：order
屬性值：number
3.屬性：flex
屬性值：number 所占的比例
重要常用的屬性值flex：1
占據主軸上剩下的空間
撐大當前容器的大小（內容）
flex-grow
flex-shirnk
flex-basis