class="d-flex" 将 v-list 在所有视口中更改为 flex

Question

在 Vuetify 文档中写道，此 class 属性 class="d-flex" 只会影响超小屏幕。但是，当我将此 class 仅放入一个 v-list 时，它会将整个组件更改为在每个视口中都可以弯曲。

Vuetify 文档： https://vuetifyjs.com/en/styles/display/#display

代码：

 <v-layout wrap>
<v-flex xs12 sm3 md2 lg2 xl2>
  <v-container>
    <v-sheet rounded="lg">
      <v-list color="transparent" class="d-flex">
        <v-list-item v-for="sideBarItem in sideBar" :key="sideBarItem" link>
          <v-list-item-content @click="changeTab(sideBarItem)">
            <v-list-item-title> {{ sideBarItem }} </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <div v-if="tab === 'Feed'">
          <v-divider class="my-2 hidden-sm-and-down"></v-divider>
          <v-list-item
            link
            color="grey lighten-4"
            @click="refreshPosts"
            class="hidden-sm-and-down"
          >
            <v-list-item-content>
              <v-list-item-title>
                Refresh
                <v-icon class="mb-1">mdi-refresh</v-icon>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </div>
      </v-list>
    </v-sheet>
  </v-container>
</v-flex>

<v-flex xs12 sm9 md10 lg10 xl10>
  <v-container>
    <v-sheet min-height="70vh" rounded="lg">
      <PostList v-if="tab === 'Feed'" />
      <AddPost
        v-else-if="tab === 'Add Post'"
        @refreshPosts="refreshPosts"
      />
      <div v-else class="pa-16">
        <v-alert text outlined color="deep-orange" icon="mdi-fire">
          This page is under development! Content will be added soon!
        </v-alert>
      </div>
    </v-sheet>
  </v-container>
</v-flex>

Answer 1

文档说：

Setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up

接下来：

.d-{value} for xs

因此 d-flex 应用于所有屏幕宽度。

请尝试以下操作： class="d-flex d-sm-block"

这种方式 display: flex 仅为 xs 设置，display: block 用于所有其他宽度。

class="d-flex" 将 v-list 在所有视口中更改为 flex

class="d-flex" changes the v-list to flex in all viewports

css

flexbox

vue.js

vuetify.js