彈性盒模型 新版與舊版比較(1)

2021-09-27 12:40:47 字數 725 閱讀 4311

body

#box{

height:200px;

border:1px solid #000;

新版彈性盒模型

/*display:flex;*/

/*flex-direction:row;*/  設定主軸方向為水平方向

/*flex-direction:column;*/設定主軸方向為垂直方向

/*flex-direction:row-reverse;*/設定主軸方向為水平,元素排列為反序

/*flex-direction:column-reverse;*/設定主軸方向為垂直,元素排列為反序

/*justify-content:flex-start;*/ 設定元素在主軸開始位置,富裕空間在主軸的結束位置

/*justify-content:flex-end;*/ 設定元素在主軸結束位置,富裕空間在主軸的開始位置

/*justify-content:center;*/ 設定元素在主軸中間位置,富裕空間在主軸的兩側位置

移動端與彈性盒模型

形成彈性盒 display flex 主軸方向 flex derection 調整主軸位置 justily content center space between space around 調整側軸位置 aligin atmes父項屬性justify contente 後跟start開始位置 en...

CSS3彈性盒模型新版和老版寫法差異

1 在使用彈性盒模型的時候父元素必須要加display box 或 display inline box 新版彈性盒模型 flex display flex 老版彈性盒模型 box display webkit box 2 box orient 定義盒模型的主軸方向 新版 flex flex dir...

CSS3彈性盒模型新版和老版寫法差異

1 在使用彈性盒模型的時候父元素必須要加display box 或 display inline box 新版彈性盒模型 flex display flex 老版彈性盒模型 box display webkit box 2 box orient 定義盒模型的主軸方向 新版 flex flex dir...