怪異盒模型
box-sizing:content-box 标準盒模型 總寬/高度=width+左右/上下padding+左右/上下border
box-sizing:border-box 怪異盒模型(IE盒模型) 總寬/高度=width(包含padding和border)
彈性盒
特點：
1、在彈性盒裡，所有子元素按照“主軸”排列
2、在彈性盒裡，所有子元素都能設定寬高
3、在彈性盒裡，一個元素如果在裡面水準垂直居中，隻需設定margin:auto;
display:flex; 使目前元素成為彈性盒，進而控制子元素
flex-direction 改變主軸
row 預設x軸為主軸，橫向排列
row-reverse 反轉橫向排列，右對齊，從後往前排，最後一項排在最前面。x軸底部顯示(右)
column y軸為主軸，縱向排列
column-reverse 反轉縱向排列，從下往上排，最後一項排在最上面 。y軸底部顯示(下)
justify-content 元素在主軸上的對齊方式
flex-start 預設，頂端對齊
flex-end 末端對齊
center 居中對齊
space-between 兩端對齊，中間自動配置設定
space-around 自動配置設定距離
align-items 元素在側軸上的對齊方式
flex-start 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。頂部顯示
flex-end 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。底部顯示
center 彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度)。
baseline 如彈性盒子元素的行内軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值将參與基線對齊。 當子元素被padding撐開時，不與flex-start等效。
stretch 預設值，拉伸，子元素無高時，将高拉伸為父元素高。
flex-wrap 是否換行
nowrap 預設值，flex容器為單行。該情況下flex子項可能會溢出容器
wrapflex 容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項内部會發生斷行
wrap-reverse 反轉 wrap 排列。
注：當父元素有高度時，換行自帶行間距
align-content 行與行之間的對齊方式
flex-start 沒有行間距
flex-end 底對齊沒有行間距
center 居中沒有行間距
space-between 兩端對齊，中間自動配置設定
space-around 自動配置設定距離
注：隻針對多行
align-self 寫在子元素上面，控制某一個子元素在側軸的對齊方式
auto 預設值。
stretch 元素被拉伸以适應容器
center 元素位于容器的中心
flex-start 元素位于容器的開頭
flex-end 元素位于容器的結尾
order 排列順序 --- 排序優先級，數字越大越往後排，預設為0，支援負數。
flex 複合屬性
flex-grow 拉伸，預設值為0，子元素寬高加起來小于父元素寬高，要有剩餘空間，才會有效果，拉伸是寬是高跟主軸有關
flex-shrink 元素寬高超出父元素寬高才有效。為0時，無變化
flex-basis 項目長度
flex:1 将彈性盒主軸上剩餘的空間全部配置設定給目前元素
複合式寫法 flex:0 1 auto; 參數分别代表flex-grow、flex-shrink、flex-basis
标簽：CSS3,flex,主軸,元素,彈性,start,對齊,怪異
來源： https://www.cnblogs.com/yznotes/p/12826357.html