Flexbox 布局中常用的 5 个 CSS 属性

Flexbox 布局已经成为了前端开发中必须掌握的一项技能。在实现页面布局时，使用 Flexbox 可以让我们更加灵活、简洁地布局。本文将介绍 Flexbox 布局中常用的 5 个 CSS 属性。

1. display: flex;

Flexbox 布局的第一步就是将容器设置为 Flex 布局。要实现这个目的，我们需要使用 CSS 属性 display: flex;。这个属性可以将容器中的子元素变成一个 Flex 容器。

.container {
  display: flex;
}

2. flex-direction

Flexbox 布局中的一个重要概念是主轴和交叉轴。flex-direction 属性用于定义主轴的方向。默认值为 row，表示主轴水平向右延伸。如果想要主轴竖直向下延伸，我们可以设置 flex-direction: column;。

.container {
  display: flex;
  flex-direction: column;
}

3. justify-content

justify-content 属性用于定义 Flex 容器中子元素在主轴上的对齐方式。这个属性有以下 5 种取值。

• flex-start: 从主轴起点开始排列（默认值）。
• flex-end: 从主轴终点开始排列。
• center: 居中对齐。
• space-between: 两端对齐，项目之间的间隔相等。
• space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

.container {
  display: flex;
  justify-content: center;
}

4. align-items

align-items 属性用于定义 Flex 容器中子元素在交叉轴上的对齐方式。这个属性有以下 5 种取值。

• flex-start: 与交叉轴起点对齐。
• flex-end: 与交叉轴终点对齐。
• center: 居中对齐。
• baseline: 与第一行文字的基线对齐。
• stretch: 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度。

.container {
  display: flex;
  align-items: center;
}

5. flex-grow

flex-grow 属性定义了 Flex 子元素在 Flex 容器的可分配空间中应该占据多少比例。默认值为 0，即如果存在剩余空间，也不分配。如果所有子元素的 flex-grow 属性都为 1，则它们将平均分配剩余空间。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

/* 第一项占据 2/3 空间，第二项占据 1/3 空间 */
.item {
  flex-grow: 2;
}

总结

以上就是 Flexbox 布局中常用的 5 个 CSS 属性。灵活掌握这些属性将会大大提高前端开发效率。需要注意的是，这些属性仅仅是 Flexbox 布局的一部分，更多的内容需要自行学习和实践。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b7274968c7c53b0dc66b9