flex
我就不重复造轮子总结了,详看参考文档.. (*ˉ︶ˉ*)
参考文档:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ★★★
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ★★
https://xinyan666.fun/article/article_detail/162/ ★ 看里面那个案例
https://www.cnblogs.com/Neeo/articles/16662156.html ★★★★★
1
2
3
4
5
2
3
4
5
实验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
/*
盒子不设置高度的话,高度是靠盒子中的元素撑起来的!
flex-direction 选择主轴是那个方向
- row横向 (默认)
- column垂直方向
- row-reverse
- column-reverse
justify-content 主轴方向的元素如何排列
以主轴是横向为例,在一行的空间上排列规则
- flex-start 从行头一个一个挨着放 item item item 1 (默认)
- flex-end 也是一个一个挨着放,但得与行尾对齐 1 item item item
- center 居中 1 item item item 1
- space-between 头尾都对齐,然后等分间距排列 item 1 item 1 item
- space-around 每个周围的空间距离相等 1 item 1 1 item 1 1 item 1
- space-evenly 视觉上的所有间距等分 1 item 1 item 1 item 1
align-items 在副轴如何排列
假设主轴是横向,副轴是垂直方向. 即看这一行在垂直方向如何排列
- flex-start
- flex-end
- center
- stretch: 当flex items 在cross axis方向的size为auto时,会自动拉伸至填充flex container
- baseline: 与基准线对齐
flex-wrap:元素很多的时候,自动换行处理
假设主轴是横向,副轴是垂直方向.
容器内子元素总宽度大于容器最大宽度,它们将会缩小以适应容器,若项目的子元素无法缩小,会溢出.
- nowrap 单行 (默认)
- wrap 多行 会自动换行,第一行在上边
- wrap-reverse 多行 会自动换行,第一行在下边
align-content 控制多行元素的排列方式.多行时如何进行堆放
多行 css属性align-content才会生效
"前提是flex-wrap设置为wrap,就会设置是多行了,多行前提下,同时设置align-items和align-content,以后者为准"
即将每行的多个元素看作一个整体!多行就有多个整体,看这多个整体在垂直方向如何排列 即多条主轴在副轴上如何排列
★ 在项目为多行的时候使用,即出现在换行的情况,对单行情况没有效果,所以align-content属性通常和flex-wrap:wrap;搭配使用
- flex-start
- flex-end
- center
简单来说,单行看align-items ; 多行 flex-wrap:wrap 是前提, 多行看align-content
一般不会同时设置align-items和align-content.
针对容器中的每个元素而言
order 默认都为0 值越小越靠前
<div class="item" style="order: 1">上海1</div>
flex-grow 默认为0 即如果存在剩余空间,也不放大.
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间（如果有的话) .
如果一个项目的flex-grow属性为2, 其他项目都为1, 则前者占据的剩余空间将比其他项多一倍.
<div class="item" style="flex-grow: 1">深圳1</div>
flex-shrink 定义了项目的缩小比例, 默认为1, 即如果空间不足, 该项目将缩小
flex-basis
flex
align-self
*/
.menu {
border: 1px solid red;
width: 500px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: center;
}
.menu .item {
width: 150px;
height: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="menu">
<div class="item" style="order: 0">北京1</div>
<div class="item" style="order: 1">上海1</div>
<div class="item" style="order: 2">深圳1</div>
<!-- <div class="item" style="order: 0">北京1</div>-->
<!-- <div class="item" style="order: 1">上海1</div>-->
<!-- <div class="item" style="order: 2">深圳1</div>-->
</div>
</body>
</html>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90