box布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 300px;
width:600px;
border: 10px solid red;
padding: 10px;
display: -webkit-box;/*//盒子布局*/
-webkit-box-orient:horizontal;/*字元素布局方向*/
-webkit-box-pack:center;
-webkit-box-align:center;
/*-webkit-box-direction: reverse;字元素是否反向*/
/*水平方向富裕空间管理，就是说多余的空间 -webkit-box-pack:，start end center justify*/
/* -webkit-box-pack:start内容在开始
-webkit-box-pack:end内容在结束
-webkit-box-pack:center内容在中间
-webkit-box-pack:justify内容均衡分布*/
/*垂直方向富裕空间管理，就是说多余的空间-webkit-box-align-start end center justify*/
/*-webkit-box-align:start内容在开始
-webkit-box-align:end内容在结束
-webkit-box-align:
-webkit-box-align:justify内容均衡分布*/
}
#div1 div{
height:100px;
width:100px;
background: bisque;
border: 1px solid;
}
#div1 div:nth-of-type(1){
/*-webkit-box-flex: 2;子元素比重*/
-webkit-box-ordinal-group: 1;/*每个元素排列顺序*/
}
#div1 div:nth-of-type(2){
/*-webkit-box-flex: 4;子元素比重*/
-webkit-box-ordinal-group: 2;/*每个元素排列顺序*/
}
#div1 div:nth-of-type(3){ /*-webkit-box-flex: 2;子元素比重*/
-webkit-box-ordinal-group: 3;/*每个元素排列顺序*/
}
#div1 div:nth-of-type(4){ /*-webkit-box-flex: 2;子元素比重*/
-webkit-box-ordinal-group: 4;/*每个元素排列顺序*/
}
#div1 div:nth-of-type(5){/* -webkit-box-flex: 2;子元素比重*/
-webkit-box-ordinal-group: 5;/*每个元素排列顺序*/
}
</style>
</head>
<body>
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读