使用.flex-fill强制让每个元素项目占据相等的水平宽度;
多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目;
<!--
使用.flex-fill强制让每个元素项目占据相等的水平宽度;
多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目;
-->
<div class="d-flex flex-row border border-warning mt-5">
<div class="p-5 border border-info">1</div>
<div class="p-5 border border-info flex-fill">2</div>
<div class="p-5 border border-info">3</div>
</div>
<div class="d-flex flex-row border border-warning mt-5">
<div class="p-5 border border-info flex-fill">1</div>
<div class="p-5 border border-info flex-fill">2</div>
<div class="p-5 border border-info">3</div>
</div>
<div class="d-flex flex-row border border-warning mt-5">
<div class="p-5 border border-info flex-fill">1</div>
<div class="p-5 border border-info flex-fill">2</div>
<div class="p-5 border border-info flex-fill">3</div>
</div>
使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
<!--
使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
-->
<div class="d-flex flex-row border border-warning mt-5 text-center">
<div class="p-5 border border-info">1</div>
<div class="p-5 border border-info flex-grow-1">2 hello World!</div>
<div class="p-5 border border-info">3</div>
</div>
使用.flex-shrink-*，*表示0或1，表示是否强制更换到新行中;
<!--
使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
-->
<!--主要看 w-100 和 flex-shrink-* -->
<div class="d-flex flex-row border border-warning mt-5 text-center">
<div class="p-5 border border-info w-100">左</div>
<div class="p-5 border border-info flex-shrink-0">右 hello World!</div>
</div>
<div class="d-flex flex-row border border-warning mt-5 text-center">
<div class="p-5 border border-info w-100">左</div>
<div class="p-5 border border-info flex-shrink-1">右 hello World!</div>
</div>
使用.mr-auto和.ml-auto等对齐方式，对flex元素进行浮动对齐;
对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
<!--
使用.mr-auto和.ml-auto等对齐方式，对flex元素进行浮动对齐;
对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
-->
<!-- 横向的： -->
<div class="d-flex flex-row border border-warning mt-5 text-center ">
<div class="p-5 border border-info">1</div>
<div class="p-5 border border-info mr-auto">2</div>
<div class="p-5 border border-info">3</div>
</div>
<div class="d-flex flex-row border border-warning mt-5 text-center ">
<div class="p-5 border border-info">1</div>
<div class="p-5 border border-info ml-auto">2</div>
<div class="p-5 border border-info">3</div>
</div>
<div class="d-flex flex-row border border-warning mt-5 text-center ">
<div class="p-5 border border-info">1</div>
<div class="p-5 border border-info ml-auto mr-auto">2</div>
<div class="p-5 border border-info">3</div>
</div>
<br>
--------------------------------------横向↑
<br>
<!-- 垂直的： -->
--------------------------------------垂直↓
<div class="d-flex flex-column border border-dark mt-5 text-center bg-dark" style="height: 300px; ">
<div class="p-2 border border-info bg-warning ">1</div>
<div class="p-2 border border-info bg-warning mb-auto">2</div>
<div class="p-2 border border-info bg-warning ">3</div>
</div>
<div class="d-flex flex-column border border-warning mt-5 text-center bg-dark" style="height: 300px;">
<div class="p-2 border border-info bg-warning mb-auto">1</div>
<div class="p-2 border border-info bg-warning ">2</div>
<div class="p-2 border border-info bg-warning mt-auto">3</div>
</div>
<div class="d-flex flex-column border border-warning mt-5 text-center bg-dark" style="height: 300px;">
<div class="p-2 border border-info bg-warning ">1</div>
<div class="p-2 border border-info bg-warning ">2</div>
<div class="p-2 border border-info bg-warning mt-auto ">3</div>
</div>
使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目;使用.flex-wrap-reverse进行项目排序的倒序;
<!--
使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目;
使用.flex-wrap-reverse进行项目排序的倒序;
-->
<!--看父的宽度 是100px才 装不进：-->
<!--flex-nowrap(不包裹，默认) 直接超出-->
<div class="d-flex flex-row border border-warning mt-5 text-center" style="width: 100px;">
<div class="p-2 border border-info">1</div>
<div class="p-2 border border-info">2</div>
<div class="p-2 border border-info">3</div>
<div class="p-2 border border-info">4</div>
<div class="p-2 border border-info">5</div>
<div class="p-2 border border-info">6</div>
</div>
<!--.flex-wrap(包裹) 换行包裹 顺便演示一下 使用.flex-wrap-reverse进行项目排序的倒序; -->
<div class="d-flex flex-row border border-warning mt-5 text-center flex-wrap flex-row-reverse" style="width: 100px;">
<div class="p-2 border border-info">1</div>
<div class="p-2 border border-info">2</div>
<div class="p-2 border border-info">3</div>
<div class="p-2 border border-info">4</div>
<div class="p-2 border border-info">5</div>
<div class="p-2 border border-info">6</div>
</div>
使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*;
.align-content-start(end、center、between、around、stretch)垂直对齐;
<!--
使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*; 【这个不多说了 好早之前就搞过了啊 没给排序的会最大的】
.align-content-start(end、center、between、around、stretch)垂直对齐;
-->
<!--
.align-content-start(end、center、between、around、stretch) 和 justify-content-between 差不多的
其实都得自己去尝试 才学的到-->
<div class="d-flex flex-column border border-warning mt-5 flex-wrap align-content-end" style="height: 100px;">
<div class="p-2 border border-info " style="width: 50px">1</div>
<div class="p-2 border border-info " style="width: 50px">2</div>
<div class="p-2 border border-info " style="width: 50px">3</div>
<div class="p-2 border border-info " style="width: 50px">4</div>
<div class="p-2 border border-info " style="width: 50px">5</div>
<div class="p-2 border border-info " style="width: 50px">6</div>
<div class="p-2 border border-info " style="width: 50px">7</div>
<div class="p-2 border border-info " style="width: 50px">8</div>
<div class="p-2 border border-info " style="width: 50px">9</div>
</div>
<div class="d-flex flex-column border border-warning mt-5 flex-wrap align-content-center" style="height: 100px;">
<div class="p-2 border border-info " style="width: 50px">1</div>
<div class="p-2 border border-info " style="width: 50px">2</div>
<div class="p-2 border border-info " style="width: 50px">3</div>
<div class="p-2 border border-info " style="width: 50px">4</div>
<div class="p-2 border border-info " style="width: 50px">5</div>
<div class="p-2 border border-info " style="width: 50px">6</div>
<div class="p-2 border border-info " style="width: 50px">7</div>
<div class="p-2 border border-info " style="width: 50px">8</div>
<div class="p-2 border border-info " style="width: 50px">9</div>
</div>
<!-- 横向实验： -->
<br><br>
------------------------------------
<div class="d-flex flex-row border border-warning mt-5 flex-wrap align-content-center" style="height: 300px">
<div class="p-2 border border-info " >1</div>
<div class="p-2 border border-info " >2</div>
<div class="p-2 border border-info " >3</div>
<div class="p-2 border border-info " >4</div>
<div class="p-2 border border-info " >5</div>
<div class="p-2 border border-info " >1</div>
<div class="p-2 border border-info " >2</div>
<div class="p-2 border border-info " >3</div>
<div class="p-2 border border-info " >4</div>
<div class="p-2 border border-info " >5</div>
<div class="p-2 border border-info " >1</div>
<div class="p-2 border border-info " >2</div>
<div class="p-2 border border-info " >3</div>
<div class="p-2 border border-info " >4</div>
<div class="p-2 border border-info " >5</div>
</div>
最后还是没 .justify-content-start(end、center、between、around) 好用.
作者：咸瑜
