在网页布局设计中，灵活的自适应布局是至关重要的，特别是在当今移动设备的流行时代。更好地响应各种设备和屏幕大小是迫切需要解决的问题。为了应对这些问题，CSS3 引入了 Flexbox 布局模块。Flex 布局模块提供了一种灵活的布局模式，使得我们能够创建非常复杂的网页布局，并且网页布局能够针对不同的屏幕按比例自适应。本文将快速介绍Flexbox布局，以帮助您更好地掌握这种布局模块。

什么是Flex布局？

Flex布局是CSS3中提供的一种新的布局模型，目的是为了更容易地实现网页布局，可以构建出复杂的布局结构并适配各种大小的设备。它可以根据屏幕大小或设备大小来调整主轴与侧轴的空间布局，任何一个容器化元素都能够使用Flex布局。

主轴和侧轴

在Flex布局中，要理解主轴和副轴，这两个方向非常重要。

主轴：默认是从左到右水平扩展，如果你将flex-direction设置为column，则主轴就是垂直方向。

侧轴：第二个方向是与主轴垂直的，副轴具有主轴上弯曲的属性。这意味着，如果你的Flex布局的主轴是水平方向，则侧轴就是垂直方向，如果主轴是垂直方向，则副轴就是水平方向。

Flex 容器

在Flex流布局中，任何节点都可以被视为容器，该节点可以通过设置 display: flex 或 display: inline-flex 的方式，成为 Flex 容器。Flex 容器中包含了三个主要的属性进行控制和调整，这些属性有助于实现灵活的自适应布局。这三个属性分别是：flex-direction、justify-content 和 align-items 属性。

flex-direction: 它用于设置主轴的方向, 即从左到右或从上到下。您可以使用以下的值：

1. row(默认值): 表示主轴是水平方向的，项目从左往右依次排列。

2. row-reverse: 表示主轴是水平方向的，项目从右到左依次排列。

3. column: 表示主轴是垂直方向的，项目从上往下依次排列。

4. column-reverse: 表示主轴是垂直方向的，项目从下往上依次排列。

justify-content：它用于设置主轴上的项目对齐方式，可以控制项目在主轴上的对齐方式。您可以使用以下的值：

1. flex-start(默认值): 表示项目位于主轴的开头。

2. flex-end: 表示项目位于主轴的结尾。

3. center: 表示项目位于主轴的中心位置。

4. space-between: 表示项目以平均分配的方式排列, 第一项在起点，最后一项在终点。

5. space-around: 表示项目以平均分配的方式排列，项目的前后都留有空间，也就是项目之间的间隙是项目与边框间距的两倍。

align-items: 它用于设置侧轴上的单个项目对其方式，也就是控制项目在侧轴上的对齐方式。您可以使用以下的值：

1. flex-start: 表示项目位于侧轴的起点位置。

2. flex-end: 表示项目位于侧轴的终点位置。

3. center: 表示项目位于侧轴的中心位置。

4. baseline: 表示项目的内容基线和容器的基线对齐。

5. stretch(默认值): 表示项目会被拉伸来占据整个侧轴的长度。

Flex 项目

在Flex布局中，项目可以看作Flex容器内的最小单元。项目通常包含文本、图像、网格、分隔符等各种元素。设置Flex项目，可以使用以下的CSS属性：flex-grow、flex-shrink、flex-basis 和 align-self 这四个CSS属性。

flex-grow：它指定项目的放大比例，用于控制项目在当前行上占据多少空间。如果当节点只有唯一一个Flex项目时，该属性可以无效。

flex-shrink：它指定项目缩小比例，用于容器空间不足时缩小项目大小。默认是1，表示如果空间不足，它将缩小。

flex-basis: 它用于设置固定大小的初始大小，与width属性类似。它的默认值是 auto，就是它的内容大小。

align-self：用于控制单个项目在侧轴上的对齐方式。默认是父元素的 align-items 属性的值。

实战Flex 布局

flex容器与flex项目的基础概念介绍以及flex属性的讲解后，现在我们就来通过几个示例来快速掌握flex布局。

1. 项目均分布局

下面这个例子演示了如何使用Flex布局让三个项目均分布局。

HTML代码如下:

```