CSS | Flex 属性

Flex 是 CSS3 中引入的一种布局方式，可用于实现弹性盒模型布局。

什么是 Flex 布局？

Flex （Flexible Box）布局是一种 CSS3 的新模块，用于更高效的布局设计。通过灵活的使用 Flex 布局属性，我们可以轻松地实现网页中各种复杂的布局需求。Flex 布局提供了一种更加灵活的布局方式，弥补了传统布局方式的不足，尤其是在响应式设计上，大展身手。

如何使用 Flex 布局？

我们在使用 Flex 布局之前，需要先定义一个容器（将使用 Flex 布局的容器），指定容器内的元素按某种方式排布。具体而言，我们需要在容器上配置 display: flex 属性。

例如，下面就是一个简单的 Flex 布局的容器定义：

.container {
  display: flex;
}

另外，还可以在容器上配置一些其他属性，例如 flex-direction，用于指定子元素的排布方向，常用的有以下四个值：

• row：默认值，子元素按照行从左到右排布；
• column：子元素按照列从上到下排布；
• row-reverse：子元素按照行从右到左排布；
• column-reverse：子元素按照列从下到上排布；

例如，下面的容器使用 flex-direction: row 属性：

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

还可以使用 justify-content 属性，指定子元素在容器主轴上的对齐方式，常用的有以下五个值：

• flex-start：默认值，子元素在主轴起始处对齐；
• flex-end：子元素在主轴结束处对齐；
• center：子元素在主轴中间对齐；
• space-between：子元素在容器中均匀分布，首尾元素分别对齐容器起始和结束位置；
• space-around：子元素在容器中均匀分布，每个元素的前后间隔均等；

例如，下面的容器使用 justify-content: center 属性：

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

更为详细的 Flex 属性介绍，请参考 MDN 上的文档。

Flex 属性的浏览器兼容性

Flex 布局在现代浏览器上有很好的兼容性，但是一些老旧的浏览器（例如 IE9 及以下版本）可能不支持 Flex 属性。因此，在使用 Flex 布局时，需要注意兼容性问题，考虑添加降级方案。