css3之flex伸缩布局详解
下面介绍一种比用浮动定位更灵活的布局方式，是的，就是flex伸缩布局，flex伸缩布局也常用于移动端的布局，因为相对于possion,float，采用flex伸缩布局更灵活，也相对的对手机的资源消耗较少！
伸缩布局会用到的属性
- display: flex;让元素编程伸缩容器
- flex-direction：row|row-reverse|column|column-reverse主轴方向，加reverse就是表示相反的方向
- justify-content:flex-start|flex-end|center|space-around|space-between设置伸缩项目在主轴方向上的对其方式
- flex-wrap: wrap(换行)|nowrap(不换行)控制伸缩项目是否换行
- align-content：flex-start|flex-end|center|space-around|space-between处理换行后的结果
- align-items：stretch|flex-start|flex-end|center处理不换行的结果(侧轴对齐)
- flex: 1;控制伸缩项目在伸缩容器中所占的剩余空间
- align-self：flex-start|flex-end|center|space-around|space-between个别调整元素位置
- order: 10;是用来调整顺序的 规则: 数字越小 元素越靠前
下面给出排列顺序的代码，其他属性请大家自行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排列顺序</title>
<style>
ul {
width: 500px;
height: 500px;
list-style: none;
border: 1px solid #000;
margin: 0 auto;
padding: 0;
}
li {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
background-color: hotpink;
float: left;
}
ul {
display: flex;
}
li:nth-child(1) {
order: 5;
}
li:nth-child(2) {
order: 2;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/06/14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读