8.Bootstrap弹性盒与浮动布局

弹性盒基本使用

<div class="d-flex">
    <div></div>
    <div></div>
</div>
<!-- 同一行上的弹性盒子容器 -->
<div class="d-inline-flex">
    <div></div>
    <div></div>
</div>
<!-- 在不同视口宽度的弹性盒 -->
<div class="d-md-flex">
    <div></div>
    <div></div>
</div>
<div class="d-xl-flex">
    <div></div>
    <div></div>
</div>

弹性盒附加类

类名	含义
.flex-[xl | lg | md | sm]-row	水品布局(从左至右)，支持响应式变化
.flex-[ ]-row-reverse	水平反向布局
.flex-[ ]-column	垂直布局(从上至下)
.flex-[ ]-column-reverse	垂直反向布局
.flex-[ ]-fill	适应内容宽度并占满水平空间，支持响应式变化
.justify-content-{ start | end | center | between | around}	头部集中 | 尾部集中 | 中央集中 | 两端 | 环绕对齐
.align-items-[ ]-{start | end | center | baseline | strech}	垂直居上 | 垂直居下 | 垂直居中 | 基线对齐 | 延展适应父元素

用法：

<div class="d-flex flex-row">
    <div></div>
    <div></div>
</div>
<div class="d-flex flex-column">
    <div></div>
    <div></div>
</div>

响应式flex类

类名	含义
.flex-[ ]-fill	适应内容宽度并占满水平空间
.flex-[ ]-grow-1	占据剩余空间
.flex-[ ]-grow-0	取消flex-grow-1的效果
.flex-[ ]-shrink-1	收缩空间
.flex-[ ]-shrink-0	取消收缩空间
.align-self-[ ]-{ start | end | center | baseline | strech}	垂直居上 | 垂直居下 | 垂直居中 | 基线对齐 | 延展适应父元素

浮动类

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none