- 使用.d-flex和.d-inline-flex实现开启flex布局样式;
- .flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)；
- .flex-row-reverse子元素水平方向居右从左到右显示(3，2，1);
- .flex-column 实现子元素垂直效果，并从上往下显示(1，2,3)；
- .flex-column-reverse实现子元素垂直效果，并从上往下显示(3，2，1)；
- .justify-content-start(end、center、between、around)实现内容对齐；
- .align-items-start(end、center、baseline、stretch)实现项目对齐;
- .align-self-start(end、center、baseline、stretch)实现单项目对齐;
例如：
<div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
<div class="p-2 border border-success">
1
</div>
<div class="p-2 border border-success">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
<div class="d-flex flex-column-reverse border border-dark mt-5 justify-content-between" style="height: 200px;">
<div class="p-2 border border-success">
1
</div>
<div class="p-2 border border-success">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
<div class="d-flex border border-dark mt-5 align-items-baseline" style="height: 200px;">
<div class="p-2 border border-success align-self-center">
1
</div>
<div class="p-2 border border-success">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
- 使用.flex-fill强制让每个元素项目占据相等的水平宽度;
- 多个项目同时设置了.flex-fill,则它们等比例分割宽度，适合导航项目;
- 如果其中一个或两个没有设置.flex-fill，则没有设置的会被设置的填充宽度;
- 使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
- 通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
- 使用.flex-shrink-*，*表示0或1，表示是否强制更换到新行中;
- 使用.mr-auto和.ml-auto等对齐方式，对flex元素进行浮动对齐;
- 对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
- 使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目;
- 使用.flex-wrap-reverse进行项目排序的倒序;
- 使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*;
- .align-content-start(end、center、between、around、stretch)垂直对齐;
例如：
<div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
<div class="p-2 border border-success">
1
</div>
<div class="p-2 border border-success flex-fill">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
<div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
<div class="p-2 border border-success">
1
</div>
<div class="p-2 border border-success flex-grow-1">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
<div class="d-flex border border-dark mt-5 justify-content-center">
<div class="p-2 border border-success w-100">
1
</div>
<div class="p-2 border border-success flex-shrink-1">
1hello world
</div>
<div class="p-2 border border-success">
2hello world
</div>
</div>
<div class="d-flex border border-dark mt-5 justify-content-center">
<div class="p-2 border border-success mr-auto">
1
</div>
<div class="p-2 border border-success">
2
</div>
<div class="p-2 border border-success">
3
</div>
</div>
<div class="d-flex border border-dark mt-5 justify-content-center flex-wrap" style="width: 50px;">
<div class="p-2 border border-success order-4">
1
</div>
<div class="p-2 border border-success order-3">
2
</div>
<div class="p-2 border border-success order-2">
3
</div>
<div class="p-2 border border-success order-1">
4
</div>
</div>
<div class="d-flex border border-dark mt-5 flex-wrap align-content-center" style="height: 300px;">
<div class="p-2 border border-success order-4">
1
</div>
<div class="p-2 border border-success order-3">
2
</div>
<div class="p-2 border border-success order-2">
3
</div>
<div class="p-2 border border-success order-1">
4
</div>
</div>
