class="d-flex" изменяет v-образный список на гибкий во всех окнах просмотра

#css #vue.js #flexbox #vuetify.js

Вопрос:

В документации Vuetify написано, что этот атрибут класса class="d-flex" будет влиять только на очень маленькие экраны. Однако, когда я помещу этот класс только в v-список, он изменит весь компонент на гибкий в каждом окне просмотра.

Документ 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>

1. Вы правы , что d-flex это равно d-flex-xs , но в документах указано, что это означает xs и выше. «При установке определенной точки останова для вспомогательного класса отображения она будет применяться ко всем ширинам экрана от обозначения и выше».

Ответ №1:

В документации говорится:

Установка определенной точки останова для вспомогательного класса отображения, она будет применяться ко всем ширинам экрана от обозначения и выше

И последовал:

.d-{value} для xs

Таким d-flex образом, применяется ко всем ширинам экрана.

Попробуйте вместо этого следовать: class="d-flex d-sm-block"

Этот способ display: flex задается только для xs всех остальных ширин и display: block для всех остальных.