您的位置：首页 > 其它

弹性盒模型 Flex 布局

2017-08-03 17:48 274 查看

html部分

<body style="margin: 0;">
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>


css部分

<style>
#box{
height: 300px;
border: 1px solid #000;

/*新版弹性盒模型*/
display: flex;

/*设置主轴方向为水平,元素排列为反序*/
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;

/*老版弹性盒模型*/
display: -webkit-box;

/*设置主轴方向为水平方向*/
-webkit-box-orient: horizontal;

/*设置主轴方向为垂直方向*/
-webkit-box-orient: vertical;

/*元素在主轴上排列为反序*/
-webkit-box-direction: reverse;

/*元素在主轴上排列为正序*/
-webkit-box-direction: normal;

/*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
-webkit-box-pack: start;

/*元素在主轴结束位置，富裕空间在主轴开始位置*/
-webkit-box-pack: end;

/*元素在主轴中间,富裕空间在主轴两侧*/
-webkit-box-pack: center;

/*富裕空间平均分配在每两个元素之间*/
-webkit-box-pack: justify;
}
#box div{
width: 50px;
height: 50px;
background-color: #f00;
font-size: 40px;
color: #fff;
margin: auto;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航