您的位置：首页 > Web前端 > HTML5

h5弹性盒模型

2016-12-15 00:00 106 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title></title>
</head>
<style type="text/css">
body {
margin: 0;
}
#box {
height: 300px;
border: 1px solid #000000;
/*新版弹性盒模型*/
/*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-box-orient: horizontal;*/
/*设置主轴方向垂直*/
/*-webkit-box-orient: vertical;*/
/*设置主轴方向水平（左->右）*/
/*-webkit-box-direction: normal;*/
/*设置主轴元素排列方向（右->左）*/
/*-webkit-box-direction: reverse;*/

/*-webkit-box-pack: center;
-webkit-box-pack: start;
-webkit-box-pack: end;*/

3ff0
/*-webkit-box-pack: justify;*/
/*-webkit-box-align: start;
-webkit-box-align: end;
-webkit-box-align: center;*/
}
#box div {
width: 50px;
height: 50px;
background-color: #FF0066;
font-size: 40px;
color: #fff;
/*新版*/
/*flex-grow: 1;*/
/*老板*/
/*-webkit-box-flex: 1;*/
}
#box div:nth-last-of-type(1){
/*order: 5;*/
-webkit-box-ordinal-group: 1;
}
#box div:nth-last-of-type(2){
/*order: 3;*/
-webkit-box-ordinal-group: 2;
}
#box div:nth-last-of-type(3){
/*order: 4;*/
-webkit-box-ordinal-group: 3;
}
#box div:nth-last-of-type(4){
/*order: 1;*/
-webkit-box-ordinal-group: 4;
}
#box div:nth-last-of-type(5){
/*order: 2;*/
-webkit-box-ordinal-group: 5;
}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 移动端

相关文章推荐

新的分享

章节导航