CSS3彈性盒---怪異盒

  怪異盒模型  

box-sizing:content-box     標準盒模型                     總寬/高度=width+左右/上下padding+左右/上下border

box-sizing:border-box      怪異盒模型（IE盒模型） 總寬/高度=width(包含padding和border)

  彈性盒  

特色：
一、在彈性盒裏，全部子元素按照「主軸」排列
二、在彈性盒裏，全部子元素都能設置寬高
三、在彈性盒裏，一個元素若是在裏面水平垂直居中，只需設置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