Flex 布局：CSS 的弹性盒子布局

Flex 布局是 CSS3 提供的一种弹性盒子布局，可以让元素在不同屏幕尺寸下更好地适配，具有更加灵活的布局方式以及对齐方式。使用 Flex 布局可以很方便的实现水平居中、垂直居中、等高列布局等效果，并且能够适应不同大小屏幕。

Flex 容器

在进行 Flex 布局时，我们需要设置一个容器，将其设置为弹性盒子容器。可以使用 display: flex; 实现：

.container {
  display: flex;
}

设置一个元素为 Flex 容器之后，该元素的所有子元素都成为弹性盒子项目。

Flex 容器的属性

• flex-direction - 决定主轴的方向。
• justify-content - 决定弹性盒子元素在主轴上的对齐方式。
• align-items - 决定弹性盒子元素在纵轴上的对齐方式。
• align-content - 决定多根弹性盒子元素对齐方式。

Flex 项目

在 Flex 容器中的元素被称为 Flex 项目。可以使用以下属性来设置 Flex 项目：

• flex-grow - 决定项目的放大比例。
• flex-shrink - 决定项目的缩小比例。
• flex-basis - 决定项目在分配多余空间前的初始大小。
• flex - flex-grow, flex-shrink, 和 flex-basis 的缩写。
• align-self - 决定单个弹性盒子元素的对齐方式。

示例

以下是一个简单的 Flex 布局示例：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  height: 100px;
}

.item-1 {
  background-color: red;
}

.item-2 {
  background-color: blue;
}

.item-3 {
  background-color: green;
}

该示例实现了一个水平居中的效果，并将三个子元素等分屏幕宽度，在不同的屏幕尺寸下仍然会保持水平居中以及等分的效果。

有了 Flex 布局，我们可以更加方便快捷地布局页面，让页面更加适应不同的屏幕尺寸。