13 - 布局工具类之 display 与 flexbox

不二如是

使用 .d-flex 工具类可以将元素设置为使用弹性盒子布局，即 display:flex;

我们先介绍一下与 display 属性相关的工具类。

display 的缩写是 d，相应的工具类使用以下格式命名：

.d-{value}
.d-{breakpoint}-{value

value 的取值就是 display 属性的值，包括

：none、inline、inline-block、block、grid、table、table-cell、table-row、flex、inline-flex

在响应式设计中，有时需要控制元素在不同设备上的显示和隐藏，这可以通过组合响应式工具类来实现。

要隐藏元素，可使用 .d-none 工具类；

如果希望针对某类设备隐藏元素，则可使用 .d-{断点}-none 。

因此，可以通过组合 .d-{断点}-none 和 .d-{断点}-block，实现针对不同设备选择性地显示和隐藏某个元素。

例如 .d-none .d-md-block .d-xl-none 表示仅在中号（md）设备上显示该元素，而在其他尺寸的设备上则隐藏该元素。

具体用法详见下表：

屏幕尺寸	类
都隐藏	d-none
仅在xs上隐藏	.d-none.d-sm-block
仅在sm上隐藏	.d-sm-none .d-md-block
仅在md上隐藏	.d-md-none.d-lg-block
仅在lg上隐藏	.d-lg-none.d-xl-block
仅在xl上隐藏	.d-xl-none .d-xxl-block .d-xxl-none
仅在xxl上隐藏都显示	.d-xxl-none
仅在xs上显示	.d-block.d-sm-none
仅在sm上显示	.d-none .d-sm-block.d-md-none
仅在md上显示	.d-none.d-md-block .d-lg-none
仅在lg上显示	.d-none.d-lg-block.d-xl-none
仅在xl上显示	.d-none .d-xl-block .d-xxl-none
仅在xxl上显示	.d-none.d-xxl-block

好好参悟上面表格中的用法哦～

这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅 ）

官方 Web 课程：