flex布局

开启flex布局

  • display: flex

    成块状布局: 默认从主轴方向从main start 到main end,即从左上到右上

  • display: inline-flex

    成行内布局

flex-direction

作用:决定主轴方向,默认row ,从左到右
row-reverse:将主轴方向反转,从右到左
column: 将主轴方向改边成列
column-reverse:将主轴方向改边成列且反转

justify-content

作用:决定flex-items的对齐方式
center: 中间对齐
start:起始方向
space-between:左右边一个,其余间隔等分
space-evenly: 等分
space-around: 最左右边的边距是中间间隔边距的一半

align-items

normal: 在内容没有指定高度情况下,将会向下拉伸填充,效果与stretch一样
stretch:当flex items在cross axis方向的 size为auto时,会自动拉伸至填充flex container
flex-start: 从左上角开始
flex-end: 从左下角开始
center: 从中间开始
baseline: 与底部基线对齐

flex-wrap

默认情况下的,都会在一行显示,放不下就会收缩的
nowrap: 默认属性
row wrap: 支持多行
wrap:可换行,多行的
wrap-reverse: 在交叉轴上反转

flex-flow

缩写属性 -> flex-direction || flex-wrap (可以多写属性)
row: 默认的,主轴方向,从左到右
row-reverse:与row相反

align-content

作用:决定 多行的时候flex-items在交叉轴上的对齐方式,一般是垂直方向上的位置变化
用法与justify-content相似
stretch:默认值

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.item {
width: 100px;
height: 100px;
text-align: center;
/* 垂直居中 */
/* height: 100px;
line-height: 100px; */
}

.item1 {
background-color: #c4545c;
/* height: 60px; */
}

.item2 {
background-color: #54c476;
/* height: 140px; */
}

.item3 {
background-color: #9754c4;
/* height: 100px; */
}

.box {
width: 550px;
height: 400px;
background-color: orange;
/*
成块状布局:
默认从主轴方向从main start 到main end,即从左上到右上
*/
display: flex;
/* 成行内布局 */
/* display: inline-flex; */

/*
flex-direction: 决定主轴方向,默认row ,从左到右
row-reverse:将主轴方向反转,从右到左
column: 将主轴方向改边成列
column-reverse:将主轴方向改边成列且反转
*/
/* flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse; */

/* justify-content:决定flex-items的对齐方式
center: 中间对齐
start:起始方向
space-between:左右边一个,其余间隔等分
space-evenly: 等分
space-around: 最左右边的边距是中间间隔边距的一半
*/
/* justify-content: center;
justify-content: start;
justify-content: space-between;
justify-content: space-around; */

/*
align-items:
normal: 在内容没有指定高度情况下,将会向下拉伸填充,效果与stretch一样
stretch:当flex items在cross axis方向的 size为auto时,会自动拉伸至填充flex container
flex-start: 从左上角开始
flex-end: 从左下角开始
center: 从中间开始
baseline: 与底部基线对齐
*/
/* align-items: flex-start; */

/*
flex-wrap:默认情况下的,都会在一行显示,放不下就会收缩的
nowrap: 默认属性
wrap:可换行,多行的
wrap-reverse: 在交叉轴上反转
*/
/* flex-wrap: wrap-reverse; */

/*
flex-flow: 缩写属性 -> flex-direction || flex-wrap
可以多写属性
row: 默认的,主轴方向,从左到右
row-reverse:与row相反
*/
flex-flow: row wrap;
/* 让flex-items:同一行上间隔同等份 */
justify-content: space-evenly;

/*
align-content: 决定 多行的时候flex-items在交叉轴上的对齐方式,一般是垂直方向上的位置变化
用法与justify-content相似
stretch:默认值
*/
align-content: stretch;
}
</style>

<body>
<div class="box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<!-- 后续添加 -->
<div class="item item1">item4</div>
<div class="item item2">item5</div>
<div class="item item1">item6</div>
<div class="item item2">item7</div>
<div class="item item3">item8</div>
<div class="item item1">item9</div>
</div>

<strong>行内元素</strong>
</body>

</html>

作用于flex-items

order:决定排布顺序,默认为0,值越小就月在前面,可以负数

align-self

作用:items可以通过 它 覆盖flex container设置的align-items
auto(默认值):遵从 flex container的align-items设置
stretch、flex-start、flex-end、center、baseline、效果跟align-items一致

flex-grow

决定了 flex items如何扩展
可以设置任意非负数字,默认值为 0
……………………
当flex container在主轴方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1,每个flex item扩展的size为:
flex container的剩余size * flex-grow/sum
=====================================
如果所有flex items的flex-grow总和不超过1,每个 flex item扩展的size为:
flex container的剩余 * flex-grow

flex-shrink

决定了 flex items如何收缩
可以设置任意非负数字,默认值为 1
=====================================
当felx items在主轴方向上超过了flex container的size时,flex-shrink属性才会有效
………………………………………
如果所有flex items的flex-shrink总和sum超过1,每个flex item收缩的size为:
flex items超出flex container的size * 收缩比例/所有flex items 的收缩比例之和
=====================================
如果所有flex items的flex-shrink总和不超过1,每个 flex item收缩的size为:
flex items超出flex container的sizesizesum收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink
flex item的base size
base size就是flex item放入 flex container之前的size
flex items收缩后的size不能小于min-width、min-height

flex-basis

用来设置flex items在主轴方向上的base size
auto默认展、具体的宽度数值(100px)
================================
决定flex items最终base size的因素,从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size

flex

为:flex-grow || flex-shrink || flex-basis的简写

一个值flex-grow
两个值:flex-grow 无单位的代表flex-shrink/有 px单位代表flex-basis
三个值:flex-grow || flex-shrink || flex-basis

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.item {
width: 250px;
height: 100px;
text-align: center;
/* 垂直居中 */
/* height: 100px;
line-height: 100px; */
}

.item1 {
background-color: #c4545c;
/* flex-grow: 1; */
}

.item2 {
background-color: #54c476;
/* order: -2; */
/* flex-grow: 1; */
flex-basis: 100px;
}

.item3 {
background-color: #9754c4;
/* order: 99; */
/* 作用于 flex-items的 */
/*
order:决定排布顺序,默认为0,值越小就月在前面,可以负数
*/

/*
align-self: items可以通过 它 覆盖flex container设置的align-items
auto(默认值):遵从 flex container的align-items设置
stretch、flex-start、flex-end、center、baseline、效果跟align-items一致
*/
/* align-self: flex-end; */

/*
flex-grow: 决定了 flex items如何扩展
可以设置任意非负数字,默认值为 0
当flex container在主轴方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1,每个flex item扩展的size为
flex container的剩余size * flex-grow/sum
如果所有flex items的flex-grow总和不超过1,每个 flex item扩展的size为
flex container的剩余 * flex-grow
*/
/* flex-grow: 1; */

/*
flex-shrink: 决定了 flex items如何收缩
可以设置任意非负数字,默认值为 1
当felx items在主轴方向上超过了flex container的size时,flex-shrink属性才会有效
如果所有flex items的flex-shrink总和sum超过1,每个flex item收缩的size为
flex items超出flex container的size * 收缩比例/所有flex items 的收缩比例之和
如果所有flex items的flex-shrink总和不超过1,每个 flex item收缩的size为
flex items超出flex container的size*size*sum*收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex item的base size
base size就是flex item放入 flex container之前的size
flex items收缩后的size不能小于min-width、min-height

*/

/*
flex-basis:用来设置flex items在主轴方向上的base size
auto默认展、具体的宽度数值(100px)

决定flex items最终base size的因素,从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size
*/

/*
flex 时flex-grow || flex-shrink || flex-basis的简写,flex属性可以指定1个,2个或3个值
一个值flex-grow
两个值:flex-grow 无单位的代表flex-shrink/有 px单位代表flex-basis
三个值:flex-grow || flex-shrink || flex-basis
*/

}

.box {
width: 550px;
height: 400px;
background-color: orange;

display: flex;

/* align-items: center; */

}
</style>

<body>
<div class="box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>

<strong>行内元素</strong>
</body>

</html>

另外分享一个不错的笔记总结,有空要去瞧瞧

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信