<!--
弹性盒模型--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{
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;
}
设置元素的具体位置
body{
margin: 0;
}
#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;
}
#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;
width: 0;
-webkit-box-flex:1;
flex-grow:1;
}
.box div a{
line-height: 1rem;
}
.box div a:before{
margin: 0 auto;
display: block;
content: '';
width: 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>