当前位置： 移动技术网 > IT编程>网页制作>CSS > 弹性盒模型--新版与旧版比较（1）

弹性盒模型--新版与旧版比较（1）

2018年10月03日  | 移动技术网IT编程  | 我要评论

<style>

　　body{

　　　　margin:0;

　　}

　　#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;*/ 设置元素在主轴中间位置，富裕空间在主轴的两侧位置

　　　　/*justify-content:space-between;*/ 设置富裕空间平均分配在每两个元素之间

　　　　/*justify-content:space-around;*/ 设置富裕空间平均分配在每个元素两侧

　　　　/align-items:flex-start;*/ *设置元素在侧轴开始位置，富裕空间在侧轴的结束位置

　　　　/align-items:flex-end;*/ *设置元素在侧轴结束位置，富裕空间在侧轴的开始位置

　　　　/align-items:center;*/ *设置元素在侧轴中间位置，富裕空间在测轴两侧

　　　　/align-items:baseline;*/ 根据侧轴方向上文字的基线对齐*

 

　　　旧版弹性盒模型

　　　　/*display:-webkit-box;*/ 注意：旧版一定要加-webkit-前缀不然无效

　　　　/*-webkit-box-orient:horizontal;*/ 设置主轴方向为水平方向

　　　　/*-webkit-box-direction:reverse;*/ 设置元素在主轴上排列为反序

　　　　/*-webkit-box-direction:normal;*/ 设置元素在主轴上排列为正序   

　　　　注意： -webkit-box-direction需要搭配-webkit-box-orient一起使用，不能单独使用，

　　　　并且它的效果与新版有所区别，区别在新版连整体方向都反过来了，而旧版只是内容的排列反过来   

　　　　/*-webkit-box-orient:vertical;*/ 设置主轴方向为垂直方向

　　　　/*-webkit-box-pack:start;*/ 设置元素在主轴开始位置，富裕空间在主轴的结束位置

　　　　/*-webkit-box-pack:end;*/ 设置元素在主轴结束位置，富裕空间在主轴的开始位置

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网