<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
1.新版display:flex
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*先版弹性盒模型*/
display:flex;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
margin: auto;
}
设置主轴方向和元素排列顺序
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
display:flex;
/*设置主轴方向*/
/*flex-direction:row;*/
/*flex-direction:column;*/
/*元素排列顺序*/
/*横向从主轴的最右边往左反向排序*/
/*flex-direction:row-reverse;*/
/*横向从主轴的最底部往上反向排序*/
flex-direction:column-reverse;
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
主轴方向富裕空间管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
display:flex;
/*所有子元素在盒子左侧显示，富裕空间在右侧*/
/*justify-content: flex-start;*/
/*所有子元素在盒子右侧显示，富裕空间在左侧*/
/*justify-content: flex-end;*/
/*所有子元素居中*/
/*justify-content: center;*/
/*富裕空间平均分配在每两个元素之间*/
/*justify-content: space-between;*/
/*富裕空间平均分配在每个元素两侧*/
justify-content: space-around;
/*老版弹性盒模型*/
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
侧轴方向富裕空间管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
display:flex;
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/*align-items:flex-start;*/
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
/*align-items:flex-end;*/
/*元素在侧轴中间位置，富裕空间在侧轴两侧*/
/*align-items:center;*/
/*根据侧轴上文字的基线对齐*/
align-items:baseline;
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
#box div:nth-of-type(2){
line-height: 50px;
}
2.老版弹性盒模型display:-webkit-box; display:inline-box;
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*先版弹性盒模型*/
/*display:flex;*/
display: -webkit-box;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
设置主轴方向和元素排列顺序
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
/*display:flex;*/
/*老版弹性盒模型*/
display: -webkit-box;
/*设置主轴方向*/
/*-webkit-box-orient:horizontal;*/
/*-webkit-box-orient:vertical;*/
/*元素排列顺序*/
/*正序从左向右*/
/*-webkit-box-direction:normal;*/
/*-webkit-box-direction:reverse;*/
/*两个配合得到纵向的反向顺序*/
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
主轴方向富裕空间管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
/*display:flex;*/
display: -webkit-box;
/*所有子元素在盒子左侧显示，富裕空间在右侧*/
/*-webkit-box-pack:start;*/
/*所有子元素在盒子右侧显示，富裕空间在左*/
/*-webkit-box-pack:end;*/
/*所有子元素居中*/
/*-webkit-box-pack:center;*/
/*富裕空间在子元素之间平均分配*/
-webkit-box-pack:justify;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
侧轴方向富裕空间管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
/*display:flex;*/
display: -webkit-box;
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/*-webkit-box-align:start;*/
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
/*-webkit-box-align:end;*/
/*所有子元素居中*/
-webkit-box-align:center;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
定义盒子的弹性空间
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版弹性盒模型*/
/*display:flex;*/
display: -webkit-box;
}
#box div{
/*新版*/
/*flex-grow:1;*/
/*老版*/
-webkit-box-flex:1;
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}