(父元素加) :/*新版彈性盒模型*/
/* display: flex; */
/*設定主軸方向為水平方向*/
/* flex-direction: row; */
/*設定主軸方向為垂直方向*/
/* flex-direction: column; */
/*老版彈性盒模型*/
/* display: -webkit-box; */
/*設定主軸方向為水平方向*/
/* -webkit-box-orient: horizontal; */
/*設定主軸方向為垂直方向*/
/* -webkit-box-orient: vertical; */
/*新版彈性盒模型*/
/*display: flex;*/
/*設定主軸方向為水平,元素排列為反序*/
/*flex-direction: row-reverse;*/
/*設定主軸方向為垂直,元素排列為反序*/
/*flex-direction: column-reverse;*/
/*老版彈性盒模型*/
display: -webkit-box;
/*設定主軸方向為水平方向*/
/*-webkit-box-orient: horizontal;*/
/*設定主軸方向為垂直方向*/
/*-webkit-box-orient: vertical;*/
/*元素在主軸上排列為反序*/
/*-webkit-box-direction: reverse;*/
/*元素在主軸上排列為正序*/
/*-webkit-box-direction: normal;*/
/*新版彈性盒模型*/
display: flex;
/*元素在主軸開始位置 ，富裕空間在主軸的結束位置*/
/*justify-content: flex-start;*/
/*元素在主軸結束位置，富裕空間在主軸開始位置*/
/*justify-content: flex-end;*/
/*元素在主軸中間,富裕空間在主軸兩側*/
/*justify-content: center;*/
/*富裕空間平均分配在每兩個元素之間*/
/*justify-content: space-between;*/
/*富裕空間平均分配在每個元素兩側*/
/*justify-content: space-around;*/
/*老版彈性盒模型*/
display: -webkit-box;
/*元素在主軸的開始位置,富裕空間在主軸的結束位置*/
/*-webkit-box-pack: start;*/
/*元素在主軸結束位置，富裕空間在主軸開始位置*/
/*-webkit-box-pack: end;*/
/*元素在主軸中間,富裕空間在主軸兩側*/
/*-webkit-box-pack: center;*/
/*富裕空間平均分配在每兩個元素之間*/
/*-webkit-box-pack: justify;*/
車軸上富裕空間管理 :
/*新版彈性盒模型*/
/*display: flex;*/
/*元素在側軸開始位置，富裕空間在側軸結束位置*/
/*align-items: flex-start;*/
/*元素在側軸結束位置，富裕空間在側軸開始位置*/
/*align-items: flex-end;*/
/*元素在側軸中間位置，富裕空間在側軸兩側*/
/*align-items: center;*/
/*根據側軸方向上文字的基線對齊*/
/*align-items: baseline;*/
/*老版彈性盒模型*/
/*display: -webkit-box;*/
/*元素在側軸開始位置，富裕空間在側軸結束位置*/
/*-webkit-box-align: start;*/
/*元素在側軸結束位置，富裕空間在側軸開始位置*/
/*-webkit-box-align: end;*/
/*元素在側軸中間位置，富裕空間在側軸兩側*/
/*-webkit-box-align: center;*/
元素彈性空間 : (給子元素加)
/*新版*/
/*flex-grow: 1;*/
/* 數值越小越靠前，可以接受0 或者負值 */
order:5;
/*老版*/
-webkit-box-flex:1;
/* 數值越小越靠前， 最小值預設處理為1*/
-webkit-box-ordinal-group:-2;
移動端與彈性盒模型
形成彈性盒 display flex 主軸方向 flex derection 調整主軸位置 justily content center space between space around 調整側軸位置 aligin atmes父項屬性justify contente 後跟start開始位置 en...
css3移動端布局 怪異盒模型和彈性盒模型
一 怪異盒模型 1 box sizing 屬性值 box sizing content box 常規盒模型 box sizing border box 怪異盒模型 ie盒模型 2 觸發怪異盒模型 box sizing border box 3 怪異盒模型特點 padding和border都會在元素的...
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...