Bootstrap样式之Flex布局

Flex弹性布局（b站上面的李炎恢老师的视频）

1、 使用.d-flex和.d-inline-flex开启flex布局样式；

同时这一样式也支持响应式的媒体查询：.d– [ sm | md | lg | xl ]-flex;
2、 使用.flex-row呈现子元素在水平方向，默认从左至右显示；

3、 使用.flex-row-reverse让子元素从屏幕的右边开始显示，从由到左1,2,3

两个呈现的样式为

两个也都支持媒体查询：.flex– [ sm | md | lg | xl ]-row;
4、 使用flex-column实现元素的垂直效果，从上往下

5、 使用flex-column-reverse实现元素的垂直效果，从下往上

两个呈现的样式为

两个也都支持媒体查询：.flex– [ sm | md | lg | xl ]-column;
6、使用.justify-content-start(end | center | between | around)内容实现对齐；

同时支持媒体查询：.justify– content-[ sm | md | lg | xl ]- start(end | center | between | around).
7、使用.align-items-start(end | center | baseline | stretch)实现项目对齐。

呈现的效果为

也支持媒体查询：align-items-[ sm | md | lg | xl ]-start;
8、 使用align-self-start(end | center | baseline |stretch )实现单个项目的对齐；

实现的效果为

也支持媒体查询：align-self-[ sm | md | lg | xl ]-start;
9、 使用.flex-fill强制让每个元素项目占据相等的水平宽度。如果只有一个有fill，第一个会占取接近80%的样子。3个都设置flex-fill就时候的就是等比分，适合导航项目。

同时也可以使用：.flex-[ sm | md | lg | xl ]-fill也可以实现响应式媒体查询操作；
10、使用.flex-grow-，表示0或者1，1可以实现.flex-fill的功能效果,0就不等比分

同时也可以使用：.flex-[ sm | md | lg | xl ]-grow-0 | 1也可以实现响应式媒体查询操作；
两个展示的效果为

10、 使用.flex-shrink-,表示0或者1，0表示强制不换行，1表示强制更换到新行中；

同时也可以使用：.flex-[ sm | md | lg | xl ]-shrink-0 | 1也可以实现响应式媒体查询操作
11、 使用.mr-auto等分对齐（right右边），对flex元素进行浮动对齐；

效果为：

12、 使用.ml-auto等分对齐（left左边），对flex元素进行浮动对齐；

效果为：

13、 使用.mb-auto和.mt-auto来设置对象方向；


14、 使用.flex-wrap和.flex-nowrap(默认)来设置元素项目：

显示的效果为：

使用.flex-wrap-reverse反向操作：

显示的效果为：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200316190249243.png
同时这三个样式，也支持响应式的媒体查询,.flex-[ sm | md | lg | xl ]-wrap;
15、 使用.order-,来设置子元素项目的排序顺序，同时也支持.order-[ sm | md | lg | xl ]-,*代表数字。

显示的效果为：

16、 使用.align-content-start(end | center | between | around | stretch)垂直对齐；
例子：在上方

显示的效果为：

在下方


同时也支持响应式媒体.align-content-[ sm | md | lg | xl ]-start.