03 彈性盒模型

1、Flex佈局（新版彈性盒模型）

     一、是什麼

          flexible box 彈性盒模型     注意：設成flex佈局以後，子元素的float clear vertical-align 都失效。該元素稱爲「容器」，子元素成爲容器成員，稱flex項目（簡稱「項目」）

          默認相似line-block樣式，row nowrap flex-start

.box{
    display: -webkit-flex;
    display: flex;
/*    display: inline-flex;     行內元素也能夠*/
}

 

     二、容器的屬性：（默認第一個）

          2.1 flex-direction: row | row-reverse | column | colunm-reverse;     //主軸排列方向

               2.1.1     區別於box方式，此時reverse會帶來對齊方式的不一樣（會沿着底部對齊，而box中的-webkit-box-direction: reverse; 只會改變項目排列方式，不會帶來對齊方式的改變）

 

          2.2 flex-wrap: nowrap | wrap | wrap-reverse;

 

          2.3 flex-flow: <flex-direction> || <flex-wrap>;     默認row nowrap

 

          2.4 justify-content: flex-start | flex-end | center（富裕空間主軸在兩端） | space-between（富裕空間分配在每兩個元素中間（元素與dom邊緣沒有富裕空間）） | space-around（富裕空間在項目周圍）;

 

          2.5 align-item: stretch | flex-star | flex-end | center | baseline;

 

          2.6 align-content: stretch | flex-start | flex-end | center | space-between | space-around;          //定義多根軸線的對齊方式（若是隻有一根軸線，該屬性失效）

 

     三、項目的屬性：（默認第一個）

          3.1 order: <int>;  值越小，排序越靠前（默認爲0，可負值）

          3.2 flex-grow: <number>; （彈性空間）定義項目的放大比例（有剩餘空間，則按照比例放大，不然不放大）， 默認0（不放大）

          3.3 flex-shrink: <number>; 負值無效， 默認爲1（空間不足時等比縮小）；若是爲0，不縮小。

          3.4 flex-basis:  <length> | auto; 默認auto，即項目原本的大小。能夠設爲項目的width或height，則項目佔據固定空間

          3.5 flex: <flex-grow> || <flex-shrink> || <flex-basis>; 默認 0 1 auto （後兩個屬性可選）

          3.6 align-self: auto | flex-start | flex-end | center | baseline | stretch;

 

     四、兼容性問題

          4.1 移動端許多不支持flex佈局

          後續.......

 

2、box（老版彈性盒模型）---》支持移動端（例如 Android UC瀏覽器只支持display: box語法， 而iOS UC瀏覽器則支持box和flex兩種方式）

     一、注意點：使用時，必需要在父元素入下（默認樣式相似inline-block）

.box{
    display: -webkit-box;
    display: box;
/*    display: inline-box;     或者*/
}

 

     二、box屬性

          2.1     -webkit-box-orient: horizontal | vertical;     水平 | 垂直方向排列

 

          2.2     -webkit-box-direction: normal | reverse;     （box中的-webkit-box-direction: reverse; 只會改變項目排列方式，不會帶來對齊方式的改變 ）

 

          2.3     -webkit-box-pack: start | end | center | justify（相似space-between）     主軸方向富裕空間的管理（即剩餘空間的管理）

 

          2.4     -webkit-box-align: start | end | center

 

     三、box子元素的屬性

          3.1     -webkit-box-flex: <int>;     默認0，不縮放；1，等比縮放

          3.2     -webkit-box-ordinal-group: 1;     最小值默認爲1（區於order，此時不可負值）