随着手机屏幕的普及，响应式布局在前端开发中变得越来越重要。而CSS3中的Flexbox布局就是一种实现响应式布局的重要工具。然而，尽管flex布局很强大，但也很复杂，不少初学者会被吓到。因此，今天我们来为大家介绍一下flex布局的完整教程，相信通过学习本文，大家可以轻松实现响应式布局！

一、什么是Flexbox布局？

Flexbox布局，又称“弹性布局”，是CSS3的一种新布局模式。顾名思义，它的核心理念在于“弹性伸缩”。可以理解成一种在父容器中，自由排列子元素的方法。Flexbox布局是非常灵活的，你可以控制它们在容器中的分布，可以使一些元素的宽度与高度可以扩展和收缩，可以改变元素的顺序和对齐方式。总之，Flexbox布局使得响应式布局变得更加容易和有趣。

二、怎样使用Flexbox布局？

首先，需要给容器设置display: flex属性，以启用flex布局：

```

.container {

display: flex;

}

```

此外，Flexbox布局一般还包括以下几个重要的组成部分：

1. 主轴（Main Axis）和交叉轴（Cross Axis）

flex容器的横轴称为“主轴”，纵轴称为“交叉轴”。在这两个轴上，我们可以控制子元素的排列与布局。通常地，“主轴”用justify-content属性控制子元素相对位置，而“交叉轴”用align-items属性控制子元素对齐方式。

2. flex-direction属性

flex-direction属性用来控制主轴的方向，取值包括row, row-reverse, column, 和 column-reverse。其中，row和row-reverse代表水平方向，column和column-reverse代表垂直方向。row和column分别表示从左到右、从上到下排列；row-reverse和column-reverse分别表示从右到左、从下到上排列。

```

.container {

display: flex;

flex-direction: row; // 默认值，表示从左到右排列

flex-direction: row-reverse; // 从右到左排列

flex-direction: column; // 从上到下排列

flex-direction: column-reverse; // 从下到上排列

}

```

3. flex-wrap属性

flex-wrap属性用于控制flex容器的子元素在同一行或同一列中是否可以换行，取值包括nowrap, wrap和wrap-reverse。

```

.container {

display: flex;

flex-wrap: nowrap; // 默认值，所有子元素放在一行或一列，缩小它们的宽度或高度以适应父容器

flex-wrap: wrap; // 子元素换行，但是不倒换顺序

flex-wrap: wrap-reverse; // 子元素换行，反向摆放，从下往上摆放

}

```

4. flex-flow属性

flex-flow属性是flex-direction和flex-wrap两个属性的一个简写形式。例如：

```

.container {

display: flex;

flex-flow: row wrap; // 默认值，表示所有子元素排成一行，并换行

}

```

5. justify-content属性

justify-content属性用于控制子元素在主轴上的对齐方式，取值包括flex-start, flex-end, center, space-between, space-around等。

```

.container {

display: flex;

justify-content: flex-start; // 默认值，从左对齐

justify-content: flex-end; // 从右对齐

justify-content: center; // 居中对齐

justify-content: space-between; // 两端对齐，子元素之间保持等间距

justify-content: space-around; // 两端对齐，子元素之间保持等间距，首尾间距相当于其中间间距的一半

}

```

6. align-items属性

align-items属性用于控制子元素在交叉轴上的对齐方式，取值包括flex-start, flex-end, center, baseline, stretch等。

```

.container {

display: flex;

align-items: stretch; // 默认值，子元素拉伸至父容器高度

align-items: flex-start; // 子元素靠父容器交叉轴起始位置对齐

align-items: flex-end; //子元素靠父容器交叉轴终止位置对齐

align-items: center; // 子元素居中对齐

align-items: baseline; // 子元素以底线对齐

}

```

7. align-content属性

align-content属性用于控制多行或列上的子元素的对齐方式，取值包括flex-start, flex-end, center, space-between, space-around, stretch等。

```

.container {

display: flex;

align-content: flex-start; // 子元素向父容器交叉轴起始位置堆叠、按照主轴方向均匀分布

align-content: flex-end; // 子元素向父容器交叉轴终止位置堆叠、按照主轴方向均匀分布

align-content: center; // 子元素居中堆叠、按照主轴方向均匀分布

align-content: space-between; // 子元素间隔均匀布置、占据父元素总宽度、沿主轴方向均匀分布

align-content: space-around; // 子元素间距相等、被分成多个区域占据父元素，最外侧的两个区域仅占一半，沿主轴方向均匀分布

align-content: stretch; // 与align-items的stretch一样，子元素高度沾满父容器的全部高度

align-content: space-evenly; // 子元素间距相等，沿主轴方向均匀分布，首尾子元素与边缘之间间距为中间子元素间间距的一半

}

```

三、实战应用Flexbox布局

1. 实现导航栏的自适应

这是一个常见的响应式布局场景。下面我们用Flexbox布局来实现这个效果：

```

```

2. 使用Flexbox布局创建响应式网格系统

Flexbox布局也可以用于创建响应式网格系统。

```