Vuetify V-使用Flexbox响应列表项

Question

如何使用FlexBox制作响应列表？我使用vuetify v-list组件。字幕在较小的屏幕上折叠。我想让它显示全宽度的内容和头像在顶部的小屏幕。按钮应该出现在底部。有什么好的方法可以做到这一点吗？

在此运行完整的演示代码

移动设备上的当前外观：

我想做的：

HTML：

<div id="app">
  <v-app id="inspire">
    <v-card
      max-width="450"
      class="mx-auto"
    >
      <v-toolbar
        color="cyan"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
  
        <v-toolbar-title>Inbox</v-toolbar-title>
  
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>
  
      <v-list three-line>
        <template v-for="(item, index) in items">
          <v-subheader
            v-if="item.header"
            :key="item.header"
            v-text="item.header"
          ></v-subheader>
  
          <v-divider
            v-else-if="item.divider"
            :key="index"
            :inset="item.inset"
          ></v-divider>
  
          <v-list-item
            v-else
            :key="item.title"
          >
            <v-list-item-avatar>
              <v-img :src="item.avatar"></v-img>
            </v-list-item-avatar>
  
            <v-list-item-content>
              <v-list-item-title v-html="item.title"></v-list-item-title>
              <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
              <div class="content" v-html="item.content"></div>
            </v-list-item-content>
            
            <v-list-item-action>
              <v-btn color="primary">Button</v-btn>
            </v-list-item-action>
          </v-list-item>
        </template>
      </v-list>
    </v-card>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { header: 'Today' },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
        title: 'Brunch this weekend?',
        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        content: 'Morbi quis odio arcu. Duis non tempus massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare porttitor lacus sed feugiat. Nulla ante ante, varius sed urna eu, euismod viverra elit. Nulla eget consequat purus. Sed a leo ac ante suscipit convallis. Etiam gravida magna augue, at commodo odio malesuada eu. Maecenas vehicula sit amet lectus sit amet finibus. Vivamus vel odio vitae enim fermentum condimentum a id nunc. Nulla malesuada eu nibh nec congue. Praesent elementum, odio vitae elementum cursus, ex enim cursus enim, consectetur fringilla est odio sit amet metus. Integer tempus massa non dui mattis, et sagittis massa ullamcorper.',
      },
      { divider: true, inset: true },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
        title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        content: 'Morbi quis odio arcu. Duis non tempus massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare porttitor lacus sed feugiat. Nulla ante ante, varius sed urna eu, euismod viverra elit. Nulla eget consequat purus. Sed a leo ac ante suscipit convallis. Etiam gravida magna augue, at commodo odio malesuada eu. Maecenas vehicula sit amet lectus sit amet finibus. Vivamus vel odio vitae enim fermentum condimentum a id nunc. Nulla malesuada eu nibh nec congue. Praesent elementum, odio vitae elementum cursus, ex enim cursus enim, consectetur fringilla est odio sit amet metus. Integer tempus massa non dui mattis, et sagittis massa ullamcorper.',
      },
      { divider: true, inset: true },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
        title: 'Oui oui',
        subtitle: '<span class="text--primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
        content: 'Morbi quis odio arcu. Duis non tempus massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare porttitor lacus sed feugiat. Nulla ante ante, varius sed urna eu, euismod viverra elit. Nulla eget consequat purus. Sed a leo ac ante suscipit convallis. Etiam gravida magna augue, at commodo odio malesuada eu. Maecenas vehicula sit amet lectus sit amet finibus. Vivamus vel odio vitae enim fermentum condimentum a id nunc. Nulla malesuada eu nibh nec congue. Praesent elementum, odio vitae elementum cursus, ex enim cursus enim, consectetur fringilla est odio sit amet metus. Integer tempus massa non dui mattis, et sagittis massa ullamcorper.',
      },
      { divider: true, inset: true },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
        title: 'Birthday gift',
        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        content: 'Morbi quis odio arcu. Duis non tempus massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare porttitor lacus sed feugiat. Nulla ante ante, varius sed urna eu, euismod viverra elit. Nulla eget consequat purus. Sed a leo ac ante suscipit convallis. Etiam gravida magna augue, at commodo odio malesuada eu. Maecenas vehicula sit amet lectus sit amet finibus. Vivamus vel odio vitae enim fermentum condimentum a id nunc. Nulla malesuada eu nibh nec congue. Praesent elementum, odio vitae elementum cursus, ex enim cursus enim, consectetur fringilla est odio sit amet metus. Integer tempus massa non dui mattis, et sagittis massa ullamcorper.',
      },
      { divider: true, inset: true },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
        title: 'Recipe to try',
        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        content: 'Morbi quis odio arcu. Duis non tempus massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare porttitor lacus sed feugiat. Nulla ante ante, varius sed urna eu, euismod viverra elit. Nulla eget consequat purus. Sed a leo ac ante suscipit convallis. Etiam gravida magna augue, at commodo odio malesuada eu. Maecenas vehicula sit amet lectus sit amet finibus. Vivamus vel odio vitae enim fermentum condimentum a id nunc. Nulla malesuada eu nibh nec congue. Praesent elementum, odio vitae elementum cursus, ex enim cursus enim, consectetur fringilla est odio sit amet metus. Integer tempus massa non dui mattis, et sagittis massa ullamcorper.',
      },
    ],
  }),
})

Answer 1

只需移动v-list-item-content标记中的按钮和图像，并使用display helper

<v-list-item-avatar class="hidden-md-and-up">
  <v-img :src="item.avatar"></v-img>
</v-list-item-avatar>

<v-list-item-content>
  <v-sheet class="mb-4 d-flex justify-center hidden-sm-and-down">
    <v-list-item-avatar>
      <v-img :src="item.avatar"></v-img>
    </v-list-item-avatar>
  </v-sheet>

  <v-list-item-title v-html="item.title"></v-list-item-title>
  <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
  <div class="content" v-html="item.content"></div>
  
  <v-sheet class="mt-4 d-flex justify-center hidden-sm-and-down">
    <v-btn color="primary">Button</v-btn>
  </v-sheet>
</v-list-item-content>

<v-list-item-action class="hidden-md-and-up">
  <v-btn color="primary">Button</v-btn>
</v-list-item-action>