Flexbox布局的运用

# 1. 介绍Flexbox布局

## 1.1 什么是Flexbox布局

Flexbox布局是一种用于进行页面布局的CSS3模块，它提供了一种更加灵活的方式来排列和对齐元素，使得页面的布局更加自适应和简洁。

## 1.2 Flexbox布局的优势

相较于传统的布局方式，Flexbox布局具有以下几个优势：

- **响应式布局**：Flexbox布局可以根据不同的屏幕尺寸和设备自动调整元素的大小和位置，实现页面的响应式布局。

- **简单易用**：使用Flexbox布局只需要设置一些简单的CSS属性，即可实现复杂的布局效果，代码量较少且易于维护。

- **强大的对齐与分布能力**：Flexbox布局提供了多种对齐方式和分布方式，可以轻松实现元素在容器内的居中、均匀分布等布局效果。

- **弹性布局**：Flexbox布局中的元素可以根据容器的空间大小自动调整宽度，实现页面布局的弹性缩放。

## 1.3 Flexbox布局的基本概念

在使用Flexbox布局之前，我们需要了解一些基本概念：

- **Flex容器（flex container）**：是指应用Flexbox布局的父元素，通过设置"display: flex"或"display: inline-flex"属性来定义。

- **Flex项目（flex item）**：是指Flex容器内的子元素，通过设置一系列的Flex属性来控制其布局行为。

- **主轴（main axis）**：是指Flex容器的主要方向，Flex项目沿着主轴进行排列。

- **交叉轴（cross axis）**：是指与主轴垂直的方向，用于控制Flex项目在交叉轴上的对齐方式。

## 1.4 兼容性考虑

由于Flexbox布局是CSS3新增的特性，兼容性需考虑。根据Can I Use网站的统计数据，Flexbox布局在现代浏览器中得到了广泛支持，如Chrome、Firefox、Safari、Edge等主流浏览器均已支持Flexbox布局。在移动端的WebView中也有较好的兼容性。不过在旧版本的IE浏览器中对Flexbox布局支持较差，需使用其他技术进行兼容处理。

总体而言，Flexbox布局在现代浏览器中得到了很好的支持，可以放心使用。对于兼容性不佳的浏览器，我们可以使用Flexbox布局的备用方案或者其他布局方式来实现相似的效果。
## 2. Flex容器与Flex项目

在Flexbox布局中，有两个重要的组成部分，即Flex容器和Flex项目。Flex容器是一个带有flex属性的容器，它包含一组Flex项目，而每个Flex项目又有自己的一些属性。下面将详细介绍Flex容器和Flex项目的属性及作用。

### 2.1 Flex容器的属性及作用

Flex容器有以下一些常用的属性用于控制Flex项目在容器内的布局：

- `display`：定义Flex容器的类型，取值为`flex`表示为Flex容器。
- `flex-direction`：定义Flex项在容器内的排列方式，有以下取值：
- `row`：默认值，表示水平方向上从左到右排列。
- `row-reverse`：表示水平方向上从右到左排列。
- `column`：表示垂直方向上从上到下排列。
- `column-reverse`：表示垂直方向上从下到上排列。
- `flex-wrap`：定义Flex项换行的规则，有以下取值：
- `nowrap`：默认值，表示不换行。
- `wrap`：表示换行，第一行在上方。
- `wrap-reverse`：表示换行，第一行在下方。
- `justify-content`：定义Flex项在主轴上的对齐方式，有以下取值：
- `flex-start`：默认值，表示在主轴起始位置对齐。
- `flex-end`：表示在主轴末尾位置对齐。
- `center`：表示在主轴居中对齐。
- `space-between`：表示在主轴上均匀分布，首尾不留空白。
- `space-around`：表示在主轴上均匀分布，首尾留有空白。
- `align-items`：定义Flex项在交叉轴上的对齐方式，有以下取值：
- `stretch`：默认值，表示在交叉轴上拉伸填满整个容器。
- `flex-start`：表示在交叉轴起始位置对齐。
- `flex-end`：表示在交叉轴末尾位置对齐。
- `center`：表示在交叉轴居中对齐。
- `baseline`：表示在基线对齐。

### 2.2 Flex项目的属性及作用

Flex项目是Flex容器内的子元素，它有以下一些常用的属性用于调整在Flex容器内的布局：

- `flex-grow`：定义Flex项目在剩余空间中的放大比例，默认值为0，表示不放大。
- `flex-shrink`：定义Flex项目在空间不足时的收缩比例，默认值为1，表示继续缩小。
- `flex-basis`：定义Flex项目在分配多余空间之前的初始长度，默认值为`auto`，表示由浏览器自动计算长度。
- `flex`：是`flex-grow`、`flex-shrink`和`flex-basis`属性的简写形式，依次对应这三个属性的值。
- `order`：定义Flex项目的排列顺序，数值越小，则排列越靠前，默认值为0。

### 2.3 如何定义Flex容器与Flex项目

在HTML中，将一个元素设为Flex容器，只需要给该元素设置`display: flex;`即可。比如下面的例子：

<div class="flex-container">
  <div class="flex-item">Flex项目1</div>
  <div class="flex-item">Flex项目2<