13. Flex 弹性布局2 BootStrap

使用.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=" 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=" 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=" 50px">1</div>
    <div class="p-2 border border-info " style=" 50px">2</div>
    <div class="p-2 border border-info " style=" 50px">3</div>
    <div class="p-2 border border-info " style=" 50px">4</div>
    <div class="p-2 border border-info " style=" 50px">5</div>
    <div class="p-2 border border-info " style=" 50px">6</div>
    <div class="p-2 border border-info " style=" 50px">7</div>
    <div class="p-2 border border-info " style=" 50px">8</div>
    <div class="p-2 border border-info " style=" 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=" 50px">1</div>
    <div class="p-2 border border-info " style=" 50px">2</div>
    <div class="p-2 border border-info " style=" 50px">3</div>
    <div class="p-2 border border-info " style=" 50px">4</div>
    <div class="p-2 border border-info " style=" 50px">5</div>
    <div class="p-2 border border-info " style=" 50px">6</div>
    <div class="p-2 border border-info " style=" 50px">7</div>
    <div class="p-2 border border-info " style=" 50px">8</div>
    <div class="p-2 border border-info " style=" 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) 好用.