Randysheng

# Flex 布局

# 设为弹性布局

设置元素样式 display:flex 或者 display:inline-flex，该元素就变成了弹性盒子。设置 FlexBox 相关的属性进行弹性布局。

# flex 容器相关属性

# flex-direction

设置弹性盒子中主轴的方向，默认方向是水平从左到右

.direction {
  // 默认值，主轴为水平方向，主轴开始位置在左端
  flex-direction: row;
  // 主轴为水平方向，主轴开发位置在右端
  flex-direction: row-reverse;
  // 主轴为垂直方向，主轴开始位置在顶端
  flex-direction: column;
  // 主轴为垂直方法，主轴开始位置在低端
  flex-direction: column-reverse;
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
flex-direction:

# flex-wrap

设置弹性盒子中子元素是否换行显示，默认不换行。当弹性盒子width不够时，默认会缩小子元素的width来使之在一行中显示。下方每个正方形被设置为120x120，但是弹性盒子默认是不换行的，因此每个正方形width小于 120。

.wrap {
  // 默认值，子元素都在一行显示，因此会自动调整每个子元素的宽度，即使子元素设置了 width
  flex-wrap: nowrap;
  // 自动换行，第一行在顶部
  flex-wrap: wrap;
  // 自动换行，第一行在底部
  flex-wrap: wrap-reverse;
}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
10
flex-wrap:

# flex-flow

是 flex-direction 和 flex-wrap 的缩写，默认值为 row nowrap 。

# justify-content

设置子元素在弹性盒子中主轴方向上的对齐方式。

.justifyContent {
  // 默认值，左对齐
  justify-content: flex-start;
  // 右对齐
  justify-content: flex-end;
  // 居中
  justify-content: center;
  // 两端对齐，子元素之间的间隔都相等
  justify-content: space-between;
  // 每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边界的间隔大一倍
  justify-content: space-around;
  // 子元素之间的间隔相等，包括子元素到边界的间隔也与子元素之间的间隔相等。
  justify-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
justify-content:

# align-items

设置子元素在弹性盒子中交叉轴方向上的对齐方式。

.alignItems {
  // 默认值，自动调整子元素大小以达到填满弹性盒子的效果
  // 若子元素设置了高度，那么不会改变其大小，因此不一定会填满弹性盒子
  // 若子元不设置高度或者高度为 auto，那么会填满弹性盒子容器
  align-items: stretch;
  // 交叉轴起点对齐
  align-items: flex-start;
  // 交叉轴终点对齐
  align-items: flex-end;
  // 交叉轴中点对齐
  align-items: center;
  // 以子元素的第一行文字的基线对齐
  align-items: baseline;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
height:
align-items:

# align-content

设置多行子元素的对齐方式。若子元素都显示在一行，那么该属性不起作用。即：需要与flex-wrap:wrap一起使用

.alignContent {
  // 默认值，若没有设置高度或者高度 auto 时，会在交叉轴方向上填满弹性盒子
  align-content: stretch;
  // 交叉轴起点对齐
  align-content: flex-start;
  // 交叉轴终点对齐
  align-content: flex-end;
  // 交叉轴中点对齐
  align-content: center;
  // 与交叉轴两端对齐，行与行之间的间隔平均分布
  align-content: space-between;
  // 每行两侧的间隔都相等。所以，行与行之间的间隔比每行到边框的间隔大一倍
  align-content: space-around;
  // 每行的间隔都相等
  align-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
flex-wrap:
height:
align-content:

# flex 子元素相关属性

下面的属性都是使用在弹性盒子中每个子元素上面。

# order

设置弹性盒子中子元素的显示顺序，默认按照每个子元素在代码中的顺序排列。

.order {
  // 默认值为 0，值越小子元素越靠前
  order: 2;
}
1
2
3
4
1
2
3
4
5
order:

# flex-grow

设置子元素的放大比例。即每个子元素分配的剩余空间都是成比例关系。

.flexGrow {
  // 默认值为 0，即如果存在剩余空间，也不放大。注意：不支持负数
  // 子元素目最终的占据的空间 = 子元素目自身大小 + 分配的剩余空间大小
  flex-grow: 2;
}
1
2
3
4
5
1
2
3
4
5
flex-grow:

# flex-shrink

设置子元素的缩小比例。

.flexShrink {
  // 默认值为 1，即如果剩余空间不足时，子元素会缩小。注意：不支持负数
  // 设置为 0 时，子元素不缩小
  flex-shrink: 1;
}
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
flex-shrink:

# flex-basis

设置子元素在不伸缩时的固定大小。当主轴为水平方向时，该属性设置宽度；当主轴在垂直方向时，该属性设置高度

.flexBasis {
  // 默认值为 auto，即 子元素本身大小。若设置了数值后，子元素自身的 width 或 height 不起作用了
  // 若子元素设置了 flex-grow 或 flex-shrink，那么 flex-basis 不起作用。
  flex-basis: auto | “num px”;
}
1
2
3
4
5
1
2
3
4
5
flex-basis:
flex-grow:

# flex

flex-grow、flex-shrink、flex-basis 三者组合的简写，其中 flex-shrink 和 flex-basis 可选

  • 默认值：0 1 auto
  • 两个快捷值：auto(1 1 auto)和 none(0 0 auto)

# align-self

设置单个子元素和其他子元素不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

.alignSelf {
  align-self: auto | flex-start | flex-end | center | baseline | stretch
}
1
2
3
1
2
3
4
5
align-self:

← 三列自适应布局 →