flex 弹性布局

弹性布局是一种按行或按列的一维布局方法。元素可以膨胀以填充多余的空间，收缩以适应更小的空间。

主轴与交叉轴

默认情况下：主轴方向从左至右，交叉轴方向从右至左。

flex 容器

要使用 flex 布局需要现在容器上设置display:flex

改变轴方向 flex-direction

  • row(默认)
  • row-reverse
  • colum
  • colum-reverse

换行与缩写 flex-wrap

与传统布局不同，flex 布局不易发生元素溢出。容器被填满时会挤压内部元素的容器(容器的内容不会被挤压)以容纳更多元素。

换行时 flex 会均分容器，使换行的元素在均分后的第二行/列显示。

在不指定 flex 容器的宽度的情况下，容器的宽度会根据块元素的特性占满一行/列。

  • nowrap
  • wrap
  • wrap-reverse

direction 和 wrap 的缩写 flex-flow

第一个参数是方向，第二个参数是换行

demo:flex-flow:row wrap

主轴对齐 justify-content

  • flex-start
  • flex-end
  • center
  • space-around(均分空间，使每个元素左右的空间相等)
  • space-between(两端对齐，元素之间的间距相同)
  • space-evenly(均匀分布，每个元素之间的间距相同)

交叉轴对齐

align-content

相对于整体容器的位置

:::warn
align-content 在未设置换行的情况下不生效
:::

  • stretch(不写宽/高时自适应拉伸)
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly

align-items

相对于产生换行后每行交叉轴的位置

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline(基线对齐)

flex 子容器

扩展比例 flex-grow

剩余的空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的 flex-grow 系数定义的比例进行分配。

收缩比例 flex-shrink

博客配置迁移，有空补图。

常见行内元素居中对齐方案

基础 html 结构

1
2
3
<div class="box">
  <div></div>
</div>

使用 flex 特性

1
2
3
4
5
6
7
8
9
.box {
  width: 200px;
  height: 200px;
  background-color: azure;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

使用表格布局

1
2
3
4
5
6
7
.box {
  width: 200px;
  height: 200px;
  background-color: aliceblue;
  display: table-cell;
  vertical-align: middle;
}

使用绝对定位与 translate 定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  width: 200px;
  height: 200px;
  background-color: aliceblue;
  position: relative;
}

.box div {
  height: 100px;
  width: 100px;
  background-color: lightblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 BFC 块

flex 会自动将容器转换为 BFC 块。

flex 会解决 margin 的遗留的上下不能自适应的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  width: 200px;
  height: 200px;
  background-color: aliceblue;
  display: flex;
}

.box div {
  height: 100px;
  width: 100px;
  background-color: azure;
  margin: auto;
}

子项分组布局

1
2
3
4
5
<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main {
  height: 200px;
  background-color: aliceblue;
  display: flex;
  align-items: center;
}
.main div {
  width: 100px;
  height: 100px;
  background-color: antiquewhite;
  margin-right: 10px;
}
.main div:nth-of-type(1) {
  margin-right: auto;
}

margin 的 auto 属性会自动占满对应方向的剩余空间

等高布局

按照 flex 的特性，不指定高度会自动延伸，使用此特性即可轻松完成等高布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="main">
  <div>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
  </div>
  <div>
    <p>高度</p>
    <p>高度</p>
    <p>高度</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
.main {
  width: 500px;
  background-color: aliceblue;
  display: flex;
  justify-content: space-between;
}
.main div {
  width: 100px;
  background-color: antiquewhite;
}

多列布局

使用了 flex-grow:1 会占满剩余空间的特性。

1
2
3
4
5
<div class="main">
  <div></div>
  <div></div>
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
  margin: 0;
}
.main {
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  justify-content: space-between;
}
.main div:nth-of-type(1) {
  width: 200px;
  background-color: antiquewhite;
}

.main div:nth-of-type(2) {
  flex-grow: 1;
  background-color: aquamarine;
}
.main div:nth-of-type(3) {
  width: 100px;
  background-color: beige;
}

同样思路可用于粘性页脚