<!-- 弹性盒模型--box 1.注意在使用弹性盒模型的时候，父级必须要加 display:box或者display:inline-box flex: display:flex box: display:-webkit-box 2.box-orient定义盒模型的主轴方向 flex: flex-direction:row/column box: -webkit-box-orient horizontal 水平方向 vertical 垂直方向 3.box-direction 元素排列顺序 flex: flex-direction:row-reverse/column-reverse; box: -webkit-box-direction normal 正序 reverse 反序 4.box-pack主轴方向富裕空间管理 flex: justify-content:flex-start/flex-end/center/space-between/space-around; box: -webkit-box-pack start所有子元素在盒子左侧显示，富裕空间在右侧 end所有子元素在盒子右侧显示，富裕空间在左 center所有子元素居中 justify富裕空间在子元素之间平均分配 5.box-align侧轴方向富裕的空间管理 flex: align-items:flex-start/flex-end/center/baseline; box: -webkit-box-align start所有子元素在据顶 end所有子元素在据底 center所有子元素居中 6.box-flex定义盒子的弹性空间 flex: flex-grow box: -webkit-box-flex 子元素的尺寸=盒子的尺寸*(子元素的box-flex属性/所有子元素的box-flex属性值的和) 7.box-ordinal-group设置元素的具体位置 flex: order box: -webkit-box-ordinal-group --> <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{
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{
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{
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{
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{
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{
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{
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{
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;
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{
50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
#box div:nth-of-type(1){
/*新版*/
/*数值越小越靠前，可以接收负值*/
/*order: 4;*/
/*老版*/
/*数值越小越靠前，接收的小于0的值都处理为1*/
-webkit-box-ordinal-group:4;
}
#box div:nth-of-type(2){
/*新版*/
/*order: 3;*/
-webkit-box-ordinal-group:3;
}
#box div:nth-of-type(3){
/*新版*/
/*order: 2;*/
-webkit-box-ordinal-group:2;
}
#box div:nth-of-type(4){
/*新版*/
/*order: 1;*/
-webkit-box-ordinal-group:1;
}
例子淘宝导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title></title>
<script type="text/javascript">
(function(){
var html=document.documentElement;
var hWidth=html.getBoundingClientRect().width;
html.style.fontSize=hWidth/15+'px';
})()
</script>
<style type="text/css">
body{
margin: 0;
}
a{
text-decoration: none;
}
.box{
font-size: 0.42rem;
display: -webkit-box;
display: flex;
padding: 0 0.5rem;
}
.box div{
text-align: center;
0;
-webkit-box-flex:1;
flex-grow:1;
}
.box div a{
line-height: 1rem;
}
.box div a:before{
margin: 0 auto;
display: block;
content: '';
1.81rem;
height: 1.81rem;
background: url(img/tm1.png);
background-size: 10.125rem 3.888888888888889rem;
}
.box:nth-of-type(1) div:nth-of-type(1) a:before{
background-position: -0.14rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(2) a:before{
background-position: -2.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(3) a:before{
background-position: -4.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(4) a:before{
background-position: -8.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(5) a:before{
background-position: -12.24rem -0.05rem;
}
.box:nth-of-type(2) div:nth-of-type(1) a:before{
background-position: -0.14rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(2) a:before{
background-position: -2.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(3) a:before{
background-position: -4.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(4) a:before{
background-position: -8.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(5) a:before{
background-position: -12.24rem -2.09rem;
}
</style>
</head>
<body>
<div class="box">
<div><a href="javascript:;">天猫</a></div>
<div><a href="javascript:;">聚划算</a></div>
<div><a href="javascript:;">天猫国际</a></div>
<div><a href="javascript:;">外卖</a></div>
<div><a href="javascript:;">天猫超市</a></div>
</div>
<div class="box">
<div><a href="javascript:;">充值中心</a></div>
<div><a href="javascript:;">肥猪旅行</a></div>
<div><a href="javascript:;">领金币</a></div>
<div><a href="javascript:;">拍卖</a></div>
<div><a href="javascript:;">分类</a></div>
</div>
</body>
</html>