我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

Flex 弹性布局

预计阅读时间: 3 分钟

Flex 弹性盒子布局

  • 任何一个容器都可以指定 Flex 布局
CSS 样式
1.box {
2	/* 兼容Safari */
3	display: -webkit-flex;
4	display: flex;
5}

注：Webkit 内核的浏览器，必须加上 -webkit- 前缀。

  • 行内元素也可以使用Flex布局
CSS 样式
1.box {
2	display: inline-flex;
3}
注意：

  父元素设为Flex 布局后，子元素的 float、clear 和 vertical-align 属性将不起作用。

  容器默认两根轴：主轴【横轴】(main axis)  和 交叉轴【纵轴】(cross axis

)，项目默认沿主轴排列。

flexbox.png

容器（flex container）属性

1、flex-direction

  • 属性：决定主轴的方向（即项目的排列方式）
  • row（默认值）：主轴方向为水平方向，起点在左端。
  • row-reverse：主轴方向为水平方向，起点在右端。
  • column：主轴方向为垂直方向，起点在顶端。
  • column-reverse：主轴方向为垂直方向，起点在底端。
CSS 代码
1.box {
2	/* 1、默认：→ 向右 */
3	flex-direction: row;
4}
5
6.box {
7	/* 2、← 向左 */
8	flex-direction: row-reverse;
9}
10
11.box {
12	/* 3、↓ 向下，起点在上 */
13	flex-direction: column;
14}
15
16.box {
17	/* 4、向上，起点在下 */
18	flex-direction: column-reverse;
19}

示意图： flexbox.png

2、flex-wrap

  • 属性：决定在同一轴线上排列的项目是否换行

示意图： w0.png

属性值：

  • nowrap（默认）：不换行。
  • w1.png
  • wrap：换行，第一行在上方。
  • w2.jpg
  • wrap-reverse：换行，第一行在下方。
  • w3.jpg
CSS 代码
1.box {
2	/* 1、不换行（默认） */
3	flex-wrap: nowrap;
4}
5
6.box {
7	/* 2、换行 */
8	flex-wrap: wrap;
9}
10
11.box {
12	/* 3、换行，第一行在下 */
13	flex-wrap: wrap-reverse;
14}

3、flex-flow

  • 属性：flex-direction 和 flex-wrap 的简写形式，默认值：row nowrap
CSS 代码
1.box {
2	flex-flow: row nowrap;
3	flex-flow: row wrap;
4	flex-flow: row wrap-reverse;
5}
6
7.box {
8	flex-flow: row-reverse nowrap;
9	flex-flow: row-reverse wrap;
10	flex-flow: row-reverse wrap-reverse;
11}
12
13.box {
14	flex-flow: column nowrap;
15	flex-flow: column wrap;
16	flex-flow: column wrap-reverse;
17}
18
19.box {
20	flex-flow: column-reverse nowrap;
21	flex-flow: column-reverse wrap;
22	flex-flow: column-reverse wrap-reverse;
23}

4、justify-content

  • 属性：定义项目在主轴上的对齐方式

属性值：

  • flex-start（默认值）：左对齐。
  • flex-end：右对齐。
  • center：居中。
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
CSS 代码
1.box {
2	justify-content: flex-start;
3}
4
5.box {
6	justify-content: flex-end;
7}
8
9.box {
10	justify-content: center;
11}
12
13.box {
14	justify-content: space-between;
15}
16
17.box {
18	justify-content: space-around;
19}

示意图： w0.png

5、align-items

  • 属性：定义项目在交叉轴上的对齐方式

属性值：

  • flex-start：交叉轴起点对齐。
  • flex-end：交叉轴终点对齐。
  • center：交叉轴中点对齐。
  • baseline：项目的第一行文字的基线对齐。
  • stretch（默认值）：若项目未设置高度或设置为 auto 将占满这个容器的高度。
CSS 代码
1.box {
2	align-items: flex-start;
3}
4
5.box {
6	align-items: flex-end;
7}
8
9.box {
10	align-items: center;
11}
12
13.box {
14	align-items: baseline;
15}
16
17.box {
18	align-items: stretch;
19}

示意图： w0.png

6、align-content

  • 属性：定义多根轴线的对齐方式，若只有一根轴线，则该属性不起作用

属性值：

  • flex-start：与交叉轴起点对齐。
  • flex-end：与交叉轴终点对齐。
  • center：与交叉轴中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。
CSS 代码
1.box {
2	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
3}

示意图： w0.png