---

Bootstrap4是前端开发中常用的框架之一，其中的Flex布局是非常重要且常用的一个布局方式。要了解Bootstrap4的Flex布局，需要先了解什么是Flexbox。

Flexbox是CSS3中的新特性，是一种弹性盒布局模型，可以控制容器内各子元素的位置、大小、排列方式等属性。Bootstrap4中的Flex布局是使用了Flexbox来实现的。

Flex布局的基本概念：

Flex容器：应用Flexbox的容器元素。

Flex子元素：Flex容器内的子元素。

主轴：Flex容器的主要方向，可设置为水平方向（row）或垂直方向（column）。

交叉轴：与主轴垂直的方向。

Flex布局的最小要素为flex容器，将要应用弹性盒模型的元素的display属性设置为flex即可。以下是Bootstrap4中常见的Flex容器类：

• .d-flex：将display设置为flex。
• .d-inline-flex：将display设置为inline-flex。

Flex容器的属性：

• flex-direction：定义主轴的方向。

以下是可选值：

• row（默认值）：水平方向从左往右排布。
• column：垂直方向从上往下排布。
• row-reverse：水平方向从右往左排布。
• column-reverse：垂直方向从下往上排布。

• flex-wrap：定义是否换行。

以下是可选值：

• nowrap（默认值）：不换行。
• wrap：如果一行排不下，自动换行。
• wrap-reverse：换行，第一行在下方。

• justify-content：定义主轴上的对齐方式。

以下是可选值：

• flex-start（默认值）：左对齐。
• flex-end：右对齐。
• center：居中。
• space-between：两端对齐，项目之间的间隔相等。
• space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

• align-items：定义交叉轴上的对齐方式。

以下是可选值：

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。

• align-content：多根轴线的对齐方式。

以下是可选值：

• stretch（默认值）：轴线占满整个交叉轴。
• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍。

Flex子元素的属性：

• order：定义子元素的排列顺序。

默认值为0。

• flex-grow：定义子元素的放大比例。

默认值为0，即不放大。

• flex-shrink：定义子元素的缩小比例。

默认值为1，即在空间不足时，等比例缩小。

• flex-basis：定义子元素在主轴方向上的初始尺寸。

默认值为auto，即由子元素自身决定。

• flex：设置子元素在弹性盒模型中的三个属性，依次为：flex-grow、flex-shrink、flex-basis。

可以通过这种方式同时设置三个属性，方便快捷。

以上是Bootstrap4中Flex布局的基本概念和部分属性，此外还有很多其他属性和方法。了解了这些基本概念和属性，就可以更有效地使用Bootstrap4的Flex布局来实现页面的布局和排版。