使用.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>