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

Posted 2021-01-13 fxyg

<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;*/ 设置元素在主轴结束位置，富裕空间在主轴的开始位置

　　　　/*-webkit-box-pack:center;*/ 设置元素在主轴中间位置，富裕空间在主轴的两侧位置

　　　　/*-webkit-box-pack:justify;*/  设置富裕空间平均分配在每两个元素之间

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

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

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

　　}

</style>

<div  id="box">

　　<div><div>

　　<div><div>

　　   <div><div>

　　<div><div>

</div>