# flex 布局
- 图片挂了 flex (opens new window) ——掘金文章地址,方便阅读。
# 一、flex容器基础概念
# 如上图
- flex-container —— flex容器
- flex-item —— 子元素
- 水平方向上有一条轴线(主轴) —— main axis
- 垂直方向上有一条轴线(十字轴) —— cross axis
先准备一下初始化代码, 只有三个文件。
1
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="style.css">
<title>flex</title>
</head>
<body>
<div class="container">
<div class="item item-1"><span> 1 </span></div>
<div class="item item-2"><span> 2 </span></div>
<div class="item item-3"><span> 3 </span></div>
<div class="item item-4"><span> 4 </span></div>
<div class="item item-5"><span> 5 </span></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2、basic.css
body{
padding: 0;
margin: 0;
}
.container{
background: #42b983;
padding: 10px;
}
.item{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
background: #ffffff;
color: #cccccc;
padding: 30px;
display: block;
text-align: center;
}
.item span{
font-size: 50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
3、style.css
- 这是用来改变一些属性来改变页面显示效果的样式文件,后面修改的样式都是在此文件中修改的
页面初始效果如下图
1
接下来我们在 style.css 中改变一些属性来学习flex布局。
1
# 二、flex-container(弹性布局父容器)属性
# flex布局(将对象作为弹性伸缩盒显示)
.container{
display: flex;
}
1
2
3
2
3
# inline-flex布局(将对象作为内联弹性伸缩盒显示)
.container{
display: inline-flex;
}
1
2
3
2
3
# flex-direction (子元素的排列方向)
- 默认是水平方向(flex-direction: row)
.container{
display: flex;
flex-direction: column;
}
1
2
3
4
2
3
4
# flex-wrap (是否要换行显示)
我们先添加一些子元素,便于效果展示
- 默认是不换行(flex-wrap: nowrap)
.container{
display: flex;
flex-wrap: wrap;
}
1
2
3
4
2
3
4
# flex-flow(同时控制flex-direction和flex-wrap)
.container{
display: flex;
flex-flow: row-reverse wrap;
}
1
2
3
4
2
3
4
row-reverse 即水平反方向 还有column-reverse垂直反方向、wrap-reverse(反向换行)
1
# justify-content(子元素主轴方向间隔)
- 默认是(justify-content: flex-start)
.container{
display: flex;
justify-content: flex-end;
}
1
2
3
4
2
3
4
.container{
display: flex;
justify-content: center;
}
1
2
3
4
2
3
4
.container{
display: flex;
justify-content: space-between;
}
1
2
3
4
2
3
4
.container{
display: flex;
justify-content: space-around;
}
1
2
3
4
2
3
4
space-around 和 space-between 的区别就是 space-between 只会在子元素之间添加间隔,space-around 会把父容器边界也视为子元素添加间隔
1
# align-items(子元素侧轴方向对齐方式)
- 现在我们把容器的高度设置一下
.container{
display: flex;
justify-content: space-around;
height: 300px;
}
1
2
3
4
5
2
3
4
5
默认是(align-items: stretch)拉伸
flex-start(容器顶部)
.container{
display: flex;
justify-content: space-around;
height: 300px;
align-items: flex-start;
}
1
2
3
4
5
6
2
3
4
5
6
- flex-center(居中)
.container{
display: flex;
justify-content: space-around;
height: 300px;
align-items: center;
}
1
2
3
4
5
6
2
3
4
5
6
- flex-end(容器底部)
.container{
display: flex;
justify-content: space-around;
height: 300px;
align-items: flex-end;
}
1
2
3
4
5
6
2
3
4
5
6
- baseline(以子元素里面的内容作为基准线水平对齐)
.container{
display: flex;
justify-content: space-around;
height: 300px;
align-items: baseline;
}
.item-1{
padding-top: 60px;
}
.item-2{
padding-top: 99px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# align-content (子元素侧轴方向对齐方式)
- 所有属性如下:(默认值为 stretch)
align-content: stretch|center|flex-start
|flex-end|space-between|space-around;
1
2
2
.container{
display: flex;
flex-wrap: wrap;
height: 300px;
}
1
2
3
4
5
2
3
4
5
- 以上属性效果图依次如下:
# flex-item(子元素属性)
# order(改变子元素的排列顺序)
- 默认所有元素 order 属性值为 0,所以我们可以设置子元素的 order 属性来控制他们的顺序。
.container{
display: flex;
height: 500px;
justify-content: space-around;
align-items: flex-start;
}
.item-1{
order: 1;
}
.item-6{
order: -1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- 如图,6 到了最前面,1 到了最后面
# flex(flex-grow,flex-shrink 和 flex-basis的缩写)
- 默认是:flex: 0 1 auto
- 关于这个属性我看到一篇文章讲的通俗易懂,奉上如下:
- CSS flex属性深入理解——张鑫旭 (opens new window)
# align-self(单个控制子元素侧轴方向布局)
.container{
display: flex;
height: 500px;
justify-content: space-around;
align-items: flex-start;
}
.item-2{
align-self: center;
}
.item-3{
align-self: flex-end;
}
.item-4{
align-self: center;
}
.item-6{
align-self: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 结语:
- 自己对弹性布局早已闻其名,但却一直一知半解,此文为自己做个小总结💦💦。
重点
- 如果flex的属性值只有一个值,则:
如果是数值,例如 flex: 1,则这个 1 表示 flex-grow,此时 flex-shrink 和 flex-basis 都使用默认值,分别是 1 和 auto。 如果是长度值,例如 flex: 100px,则这个 100px 显然指 flex-basis,因为3个缩写 CSS 属性中只有 flex-basis 的属性值是长度值。此时 flex-grow 和 flex-shrink 都使用默认值,分别是 0 和 1。
- 如果 flex 的属性值有两个值,则:
第1个值一定指 flex-grow,第2个值根据值的类型不同表示不同的 CSS 属性,具体规则如下: 如果第 2 个值是数值,例如 flex: 1 2,则这个 2 表示 flex-shrink,此时flex-basis 使用默认值 auto。 如果第 2 个值是长度值,例如 flex: 1 100px,则这个 100px 指flex-basis,此时 flex-shrink 都使用默认值 0。
- 如果 flex 的属性值有三个值,则这 3 个值分别表示 flex-grow,flex-shrink 和 flex-basis。