下面介绍一种比用浮动定位更灵活的布局方式,是的,就是flex伸缩布局,flex伸缩布局也常用于移动端的布局,因为相对于possion,float,采用flex伸缩布局更灵活,也相对的对手机的资源消耗较少!

伸缩布局会用到的属性

  1. display: flex;让元素编程伸缩容器
  2. flex-direction:row|row-reverse|column|column-reverse主轴方向,加reverse就是表示相反的方向
  3. justify-content:flex-start|flex-end|center|space-around|space-between设置伸缩项目在主轴方向上的对其方式
  4. flex-wrap: wrap(换行)|nowrap(不换行)控制伸缩项目是否换行
  5. align-content:flex-start|flex-end|center|space-around|space-between处理换行后的结果
  6. align-items:stretch|flex-start|flex-end|center处理不换行的结果(侧轴对齐)
  7. flex: 1;控制伸缩项目在伸缩容器中所占的剩余空间
  8. align-self:flex-start|flex-end|center|space-around|space-between个别调整元素位置
  9. order: 10;是用来调整顺序的 规则: 数字越小 元素越靠前

下面给出排列顺序的代码,其他属性请大家自行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>