Vuetify中d-flex类仅作用超小屏 给v-list添加后全视口生效问题

规则澄清 #

你对Vuetify的display类生效规则存在误解：不带断点后缀的通用类d-flex本身就是全视口下生效的属性，不存在仅超小屏生效的逻辑。

仅超小屏生效的实现方式 #

如果你的需求是仅在超小屏（xs）下让v-list为flex布局，更大尺寸视口下恢复v-list的默认布局，需要按照Vuetify移动优先的断点规则组合类名：

• 保留d-flex实现超小屏下的flex布局
• 追加d-sm-block让小屏及以上视口覆盖为默认块级布局

你只需要修改代码中v-list的class属性即可：

<!-- 修改前 -->
<v-list color="transparent" class="d-flex">

<!-- 修改后 -->
<v-list color="transparent" class="d-flex d-sm-block">

补充Vuetify display类通用命名规则 #

• 通用类（无断点后缀）：格式为d-{属性值}，所有视口下均生效，属性值可选flex、block、inline、none等
• 断点限定类：格式为d-{断点标识}-{属性值}，仅在对应断点及以上的视口生效，断点标识可选xs、sm、md、lg、xl

内容的提问来源于stack exchange，提问作者aryankarim