变成弹性盒模型：d-flex/d-inline-flex
变成响应式的弹性盒模型：d-{breakpoint}-flex/inline-flex
子元素的排列方向：
1.flex-row 正序水平排列
2.flex-row-reverse 倒序水平排列
3.flex-column 正序垂直排列
4.flex-column-reverse 倒序垂直排列
响应式的排列方式：flex-{breakpoint}-row/column/row-reverse/column-reverse
子元素的对齐方式：
1.主轴上的对齐 - 水平对齐
主轴上的对齐-左对齐：justify-content-start
主轴上的对齐-右对齐：justify-content-end
主轴上的对齐-居中对齐：justify-content-center
主轴上的对齐-两端对齐：justify-content-between
主轴上的对齐-分散居中对齐：justify-content-around
主轴上的对齐-分散居中对齐-响应式：justify-content-{breakpoint}-between/...
2.交叉轴（纵轴）上的对齐 - 垂直对齐
交叉轴上的对齐-顶对齐：align-items-start
交叉轴上的对齐-底对齐:align-items-end
交叉轴上的对齐-中间对齐:align-items-center
交叉轴上的对齐-基线对齐:align-items-baseline
交叉轴上的对齐-如果子元素没有设置高或者设置成了auto，子元素将占满整个容器的高度:align-items-stretch
交叉轴上的对齐-响应式: align-items-{breakpoint}-start/...
元素的自身的对齐方式：align-self-start/end/center/baseline/stretch
元素的自身的对齐方式-响应式：align-self-{breakpoint}-start/end/center/baseline/stretch
填满:flex-fill
填满-响应式：flex-{breakpoint}-fill
伸缩值：
1.flex-grow-* 扩展比例，数字为0表示不扩展，数字为1表示扩展，只有这两个数字
2.flex-shrink-* 收缩比例，数字为0表示不收缩，数字为1表示扩展，只有这两个数字
伸缩-响应式：flex-{breakpoint}-{grow|shrink}-0/1
自动的间距：mr-auto/ml-auto/mb-auto/mt-auto
Wrap:flex-wrap-reverse、flex-nowrap、flex-wrap
Wrap-响应式，flex-{breakpoint}-wrap
排序：order-*（0-12）
排序-响应式,order-{breakpoint}-*
多行对齐，对于单行是没有效果的
align-content-start 顶对齐
align-content-end 底对齐
align-content-center 中间对齐
align-content-between 上下两端对齐
align-content-around 上下分散对齐
align-content-stretch 没有给高度或者高度为auto，那高度会取父级的高度
多行对齐-响应式：align-content-{breakpoint}-end
浮动：float-left、float-right、float-none（3.x的版本里的浮动是.pull-left/.pull-right）
浮动-响应式：float-{breakpoint}-left/left/none
清除浮动: clearfix
关闭图标： close
图像替换： text-hide
内容溢出：具有设置宽度和高度尺寸的元素上使用 .overflow-auto ， 此内容将垂直滚动。
具有设置宽度和高度尺寸的元素上使用 .overflow-hidden
定位：
position-static 默认值，没有定位
position-relative 相对定位
position-absolute 绝对定位
position-fixed 固定定位
position-sticky 粘性定位
fixed-top 固定在顶部
fixed-bottom 固定在底部
sticky-top 粘性置顶，需要放在body下的第一层级
阴影：
shadow-none 没有阴影
shadow-sm 小阴影
shadow 正常的阴影
shadow-lg 大的阴影
尺寸：
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
mw-100 宽度的最大值
mh-100 高度的最大值
间距：略
文本：text-justify...
换行和内容溢出处理:text-nowrap、text-truncate
文字大小写转换：text-lowercase/text-uppercase/text-capitalize
字体粗细和斜体:
font-weight-bold 加粗字体
font-weight-normal 正常字体
font-weight-light 更细的字体
font-italic 倾斜字体
等宽字体：text-monospace
垂直对齐：align-baseline/align-top/align-middle/align-bottom/align-text-top/align-text-bottom
可见性:
visible 可以看见
invisible 看不见，占据空间
d-none 看不见，不占据空间
————————————————
版权声明：本文为CSDN博主「Magic-JJ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43715364/article/details/106332035