在前端布局中，盒子模型是最基本、最常用的布局方式之一。盒子模型就是将每个 HTML 元素看作一个矩形的”盒子”，有自己的内容、内边距、边框、外边距等属性。在 CSS3 中，加入了盒子弹性布局，使得我们在实现布局时更加的方便和灵活。
一、弹性盒子模型的基本概念
弹性盒子模型也可以称作Flexbox模型，它是CSS3中新增的功能。而Flexbox是Flexible Box的缩写，意为”弹性布局”。
Flexbox 布局是?种全新的且比较有趣的 CSS 布局模式，允许你更容易地创建复杂的布局和对齐方式。它就是CSS3中新增的一个模块。Flexbox 可以将容器中的元素，根据容器的大小自动的排列顺序和缩放它们的大小。
Flex layout 是非常重要的，因为可以让我们更方便的在不同设备和屏幕上展示和定位UI元素。
在弹性盒子模型中，会涉及到以下几个基本的概念：
1. 主轴和交叉轴
在弹性盒子布局中，会涉及到两个方向，即主轴和交叉轴。主轴默认是从左向右的，交叉轴默认是从上到下的。
这是主轴
这是交叉轴
在设计布局之前，需要明确哪个方向是主轴，哪个方向是交叉轴。
2. 容器和项目
在弹性盒子模型中，需要考虑两种元素，容器和项目。容器是设置Flexbox的标签，项目则是容器中的子元素。容器和项目共同决定着Flexbox的布局方式。
容器和项目拥有的常用属性如下：
3. 弹性比例
Flex项目默认大小是根据内容自适应的，但可以设置为具有弹性比例，以便它们能够根据空间大小缩放。
Flex弹性比例是指项目在剩余的可用空间中所占的比例。剩余可用空间是指生效的容器空间减去当前所有项目已经占据的空间。
语法：flex: flex-grow flex-shrink flex-basis;
其中，flex-grow 和 flex-basis 属性是必须设置的。flex-grow 属性代表放大比例。如果有两个项目都有这个属性，那么它们的放大因子相同。例如，如果两个项目都有放大因子2，它们的大小将是它们初始大小的2倍。
4. flex-wrap 属性
默认情况下，Flexbox只会将所有的Flex项目布局在同一行（或同一列）中，可能会因为容器宽度不够而导致溢出问题。而flex-wrap 属性可用于实现在容器中自动换行的效果。
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
5. justify-content 属性
justify-content属性可以用来设置主轴上Flex项目的对齐方式。CSS默认设置为flex-start，即左对齐。
justify-content 的的属性值介绍：
.justify-content {
/* 左对齐 */
justify-content: flex-start;
/* 居中对齐 */
justify-content: center;
/* 右对齐 */
justify-content: flex-end;
/* 两端对齐，项目之间的间隔相等 */
justify-content: space-between;
/* 两端对齐，项目之间的间隔相等且有一半位于容器最左端或最右端 */
justify-content: space-around;
}
6. align-items 属性
align-items属性可以设置交叉轴上Flex项目的对齐方式。
align-items 属性值介绍：
.align-items {
/* 上对齐 */
align-items: flex-start;
/* 中间对齐 */
align-items: center;
/* 底部对齐 */
align-items: flex-end;
/* 拉伸,默认值 */
align-items: stretch;
/* 基于项目自身进行对齐 */
align-items: baseline;
}
7. align-content 属性
align-content 属性定义了多行Flexbox交叉轴的对齐方式。仅当Flexbox的容器有多行项目时才有意义，即当flex-wrap属性设置为wrap时。
align-content 属性值介绍：
.align-content {
/* 交叉轴的起点和顶部对齐 */
align-content: flex-start;
/* 交叉轴的中点对齐 */
align-content: center;
/* 交叉轴的终点和底部对齐 */
align-content: flex-end;
/* 与交叉轴上的每个项目之间留有空白 */
align-content: space-between;
/* 与交叉轴上的每个项目之间留有空白，项目之前、之后的空白大小是两个项目之间空白大小的一半 */
align-content: space-around;
/* 拉伸，并占据整个父容器的高度 */
align-content: stretch;
}
二、实例讲解
我们在实现Flexbox弹性盒子模型的过程中，我们通常是需要同步设置容器和项目的样式。接下来 我们分别来对容器和项目的样式进行详细讲解
1. 针对容器的样式设置
首先需要明确Flex容器需要设置display值为flex来开启Flex伸缩布局。
.container {
/* 开启Flex伸缩布局 */
display: flex;
/* 设置主轴方向为水平方向，即项目在水平方向上排列 */
flex-direction: row;
/* 在 Flex 内容中垂直居中 */
justify-content: center;
/* 在交叉轴上垂直居中 */
align-items: center;
}
2. 针对项目的样式设置
对于项目来说，如果不指定宽度或高度，则它们会在父容器中自动分配可用的空间。如果有固定的宽度或高度，则可以设置对应的值。例如：
.item {
background-color: #ffc107;
color: #fff;
padding: 10px;
/* 单位为px,也可以设置为百分比 */
width: 100px;
height: 80px;
}
同时，还可以使用flex来设置Flex弹性比例。
.item {
background-color: #ffc107;
color: #fff;
padding: 10px;
/* 获取更多的空间，增大弹性值 */
flex: 1;
}
三、总结
Flexbox布局，旨在提供更容易的方式来实现不同屏幕下的布局。与传统的布局方式相比，Flexbox布局使我们的工作更加简单，这样我们可以节省更多的时间来专注于其他方面的开发，同时也可以提高我们开发的效率。
弹性布局有很多种属性设置方式，上述介绍的仅是基本的属性内容。在实际使用过程中，可以根据需要灵活运用。