12. Flex 弹性布局 BootStrap

使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】

.flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】

.flex-row-reverse子元素水平方向居右从左到右显示(3，2，1) ;【横向反转弹性布局】

例：

<!--使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】
.flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】
.flex-row-reverse子元素水平方向居右从左到右显示(3，2，1) ;【横向反转弹性布局】-->

<div class="d-flex flex-row  border border-info w-75  ">
    <div class="p-2 border border-warning ">1</div>
    <div class="p-2 border border-warning ">2</div>
    <div class="p-2 border border-warning ">3</div>
</div>

<!--下面是反转-->
<div class="d-flex flex-row flex-row-reverse   border border-info w-75">
    <div class="p-2 border border-warning ">1*</div>
    <div class="p-2 border border-warning ">2*</div>
    <div class="p-2 border border-warning ">3*</div>
</div>

.flex-column 实现子元素垂直效果，并从上往下显示(1，2,3)　　【学过flex的都知道 y是默认的侧轴】

.flex-column-reverse实现子元素垂直效果，并从上往下显示(3，2，1)【竖向反转弹性布局】

<!--.flex-column 实现子元素垂直效果，并从上往下显示(1，2,3)　　【学过flex的都知道 y是默认的侧轴】
.flex-column-reverse实现子元素垂直效果，并从上往下显示(3，2，1)【竖向反转弹性布局】-->

<div class="d-flex flex-column  border border-info w-75  ">
    <div class="p-2 border border-warning ">1</div>
    <div class="p-2 border border-warning ">2</div>
    <div class="p-2 border border-warning ">3</div>
</div>
<br>
<br>
<!--反转-->
<div class="d-flex flex-column flex-column-reverse  border border-info w-75  ">
    <div class="p-2 border border-warning ">1</div>
    <div class="p-2 border border-warning ">2</div>
    <div class="p-2 border border-warning ">3</div>
</div>

.justify-content-start(end、center、between、around)实现内容对齐;

<!--.justify-content-start(end、center、between、around)实现内容对齐;

老规矩这里只测试row的end  其他的自己测试【包括column 和 反转】

--> <!--被内容移动到最后【右】了 justify-content-end --> <div class="d-flex flex-row justify-content-end border border-info w-75 "> 

<div class="p-2 border border-warning w-25">1</div>
<div class="p-2 border border-warning w-25">2</div> 
<div class="p-2 border border-warning w-25">3</div> 
</div> 

<br> 
<br> 

<!--因为是反转的 参照反转的来移 被内容移动到最后【左】了 justify-content-end --> 

<div class="d-flex flex-row flex-row-reverse justify-content-end border border-info w-75 "> 
<div class="p-2 border border-warning ">1</div>
<div class="p-2 border border-warning ">2</div> 
<div class="p-2 border border-warning ">3</div> 
</div>

.align-items-start(end、center、baseline、stretch)实现项目对齐;【flex：父】

.align-self-start(end、center、baseline、stretch)实现单项目对齐;【flex的子元素 子】

<!--
.align-items-start(end、center、baseline、stretch)实现项目对齐;【flex：父】
.align-self-start(end、center、baseline、stretch)实现单项目对齐;【flex的子元素 子】

老规矩这里只测试row的end  其他的自己测试【包括column 和 反转】
-->
<!-- flex-row align-items-end-->
<div class="d-flex flex-row border border-dark  align-items-end " style="height: 300px;">
    <div class="border border-warning p-5">1</div>
    <div class="border border-warning p-5">2</div>
    <div class="border border-warning p-5">3</div>
</div>

<br>
<br>

<!-- flex-row align-self-start / end / center-->
<div class="d-flex flex-row border border-dark" style="height: 300px;">
    <div class="border border-warning p-5 align-self-start">1</div>
    <div class="border border-warning p-5 align-self-center">2</div>
    <div class="border border-warning p-5 align-self-end">3</div>
</div>