Flex

使用响应式 flexbox 实用程序，通过对齐和更多功能控制弹性容器的布局。

启用 flexbox

使用 display 工具，你可以将任何元素转换为 flexbox 容器，将 direct children elements 转换为 flex items。使用其他 flex 属性的工具，你可以进一步自定义它们的交互。

template

  1. <template>
  2.   <v-card
  3.     class="d-flex pa-2"
  4.     outlined
  5.     tile
  6.   >
  7.     <div>I'm a flexbox container!</div>
  8.   </v-card>
  9. </template>

Flex - 图1

template

  1. <template>
  2.   <v-card
  3.     class="d-inline-flex pa-2"
  4.     outlined
  5.     tile
  6.   >
  7.     <div>I'm an inline flexbox container!</div>
  8.   </v-card>
  9. </template>

Flex - 图2

您还可以基于各种断点自定义 flex 工具进行应用。

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Flex 方向

默认情况下，d-flex 应用的 flex-direction: row 通常可以省略。但是，在某些情况下，您可能需要显式定义它。

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex flex-row mb-6"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.     >
  9.       <v-card
  10.         v-for="n in 3"
  11.         :key="n"
  12.         class="pa-2"
  13.         outlined
  14.         tile
  15.       >
  16.         Flex item {{ n }}
  17.       </v-card>
  18.     </v-card>
  19.     <v-card
  20.       class="d-flex flex-row-reverse"
  21.       color="grey lighten-2"
  22.       flat
  23.       tile
  24.     >
  25.       <v-card
  26.         v-for="n in 3"
  27.         :key="n"
  28.         class="pa-2"
  29.         outlined
  30.         tile
  31.       >
  32.         Flex item {{ n }}
  33.       </v-card>
  34.     </v-card>
  35.   </div>
  36. </template>

Flex - 图3

flex-column 和 flex-column-reverse 工具类可用于更改 flexbox 容器的方向。请记住，IE11 和 Safari 可能在列的方向存在问题。

template

  1. <template>
  2.   <div>
  3.     <div class="d-flex flex-column mb-6">
  4.       <v-card
  5.         v-for="n in 3"
  6.         :key="n"
  7.         class="pa-2"
  8.         outlined
  9.         tile
  10.       >
  11.         Flex item {{ n }}
  12.       </v-card>
  13.     </div>
  14.     <div class="d-flex flex-column-reverse">
  15.       <v-card
  16.         v-for="n in 3"
  17.         :key="n"
  18.         class="pa-2"
  19.         outlined
  20.         tile
  21.       >
  22.         Flex item {{ n }}
  23.       </v-card>
  24.     </div>
  25.   </div>
  26. </template>

Flex - 图4

flex-direction 也有响应式变化。

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Flex justify

可以使用 flex justify 类更改 justify-content 的 flex 设置。默认情况下，这将修改 x-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 y-axis。在 start（浏览器默认）,end, center, between, 或者 around 中进行选择。

template script

  1. <template>
  2.   <div>
  3.     <v-card
  4.       v-for="j in justify"
  5.       :key="j"
  6.       :class="`d-flex justify-${j} mb-6`"
  7.       color="grey lighten-2"
  8.       flat
  9.       tile
  10.     >
  11.       <v-card
  12.         v-for="n in 3"
  13.         :key="n"
  14.         class="pa-2"
  15.         outlined
  16.         tile
  17.       >
  18.         Flex item
  19.       </v-card>
  20.     </v-card>
  21.   </div>
  22. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       justify: [
  5.         'start',
  6.         'end',
  7.         'center',
  8.         'space-between',
  9.         'space-around',
  10.       ],
  11.     }),
  12.   }
  13. </script>

Flex - 图5

justify-content 也有响应式变化。

  • .justify-start
  • .jusify-end
  • .justify-center
  • .justify-space-between
  • .justify-space-around
  • .justify-sm-start
  • .justify-sm-end
  • .justify-sm-center
  • .justify-sm-space-between
  • .justify-sm-space-around
  • .justify-md-start
  • .justify-md-end
  • .justify-md-center
  • .justify-md-space-between
  • .justify-md-space-around
  • .justify-lg-start
  • .justify-lg-end
  • .justify-lg-center
  • .justify-lg-space-between
  • .justify-lg-space-around
  • .justify-xl-start
  • .justify-xl-end
  • .justify-xl-center
  • .justify-xl-space-between
  • .justify-xl-space-around

Flex align

可以使用 flex align 类更改 align-items 的 flex 设置。默认情况下，这将修改 y-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 x-axis。在 start, end, center, baseline, 或者 stretch（浏览器默认）中进行选择。

当在 IE11 使用 flex align 时，你需要设置一个明确的 height，因为 min-height 的不足会导致不符合预期的结果。

template script

  1. <template>
  2.   <div>
  3.     <v-card
  4.       v-for="a in align"
  5.       :key="a"
  6.       :class="`d-flex align-${a} mb-6`"
  7.       color="grey lighten-2"
  8.       flat
  9.       height="100"
  10.       tile
  11.     >
  12.       <v-card
  13.         v-for="n in 3"
  14.         :key="n"
  15.         class="pa-2"
  16.         outlined
  17.         tile
  18.       >
  19.         Flex item
  20.       </v-card>
  21.     </v-card>
  22.   </div>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       align: [
  5.         'start',
  6.         'end',
  7.         'center',
  8.         'baseline',
  9.         'stretch',
  10.       ],
  11.     }),
  12.   }
  13. </script>

Flex - 图6

align-items 也有响应式变化。

  • .align-start
  • .align-end
  • .align-center
  • .align-baseline
  • .align-stretch
  • .align-sm-start
  • .align-sm-end
  • .align-sm-center
  • .align-sm-baseline
  • .align-sm-stretch
  • .align-md-start
  • .align-md-end
  • .align-md-center
  • .align-md-baseline
  • .align-md-stretch
  • .align-lg-start
  • .align-lg-end
  • .align-lg-center
  • .align-lg-baseline
  • .align-lg-stretch
  • .align-xl-start
  • .align-xl-end
  • .align-xl-center
  • .align-xl-baseline
  • .align-xl-stretch

Flex align self

使用 flex 类和 align-self 类的时候，align-self 和 flex 的设置能够被改变。默认情况下，这将修改 x-axis 上的 flexbox 项，但是使用 flex-direction: column 的时候这将反过来修改 y-axis。从 start, end, center, baseline, auto, 或 stretch（浏览器默认） 之间来选择。

template script

  1. <template>
  2.   <div>
  3.     <v-card
  4.       v-for="j in justify"
  5.       :key="j"
  6.       class="d-flex mb-6"
  7.       color="grey lighten-2"
  8.       flat
  9.       height="100"
  10.       tile
  11.     >
  12.       <v-card
  13.         v-for="n in 3"
  14.         :key="n"
  15.         class="pa-2"
  16.         :class="[n === 2 && `align-self-${j}`]"
  17.         outlined
  18.         tile
  19.       >
  20.         {{ n === 2 ? 'Aligned flex item' : 'Flex item' }}
  21.       </v-card>
  22.     </v-card>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       justify: [
  5.         'start',
  6.         'end',
  7.         'center',
  8.         'baseline',
  9.         'auto',
  10.         'stretch',
  11.       ],
  12.     }),
  13.   }
  14. </script>

Flex - 图7

align-self-items 也同样有响应式变量。

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-auto
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-auto
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-auto
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-auto
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-auto
  • .align-self-xl-stretch

自动边距

在 flexbox 容器中使用 margin 助手类，当分别使用 flex-row 或者 flex-column 时，你可以在 x-axis 或者 y-axis 上控制 flex 项的位置。

Flex 项与非默认的 justify-content 值一起使用时，IE11 不会正确适配自动边距。 浏览解决办法 See this StackOverflow answer。

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex mb-6"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.     >
  9.       <v-card
  10.         v-for="n in 3"
  11.         :key="n"
  12.         class="pa-2"
  13.         outlined
  14.         tile
  15.       >
  16.         Flex item
  17.       </v-card>
  18.     </v-card>
  20.     <v-card
  21.       class="d-flex mb-6"
  22.       color="grey lighten-2"
  23.       flat
  24.       tile
  25.     >
  26.       <v-card
  27.         v-for="n in 3"
  28.         :key="n"
  29.         :class="n === 1 && 'mr-auto'"
  30.         class="pa-2"
  31.         outlined
  32.         tile
  33.       >
  34.         Flex item
  35.       </v-card>
  36.     </v-card>
  38.     <v-card
  39.       class="d-flex mb-6"
  40.       color="grey lighten-2"
  41.       flat
  42.       tile
  43.     >
  44.       <v-card
  45.         v-for="n in 3"
  46.         :key="n"
  47.         :class="n === 3 && 'ml-auto'"
  48.         class="pa-2"
  49.         outlined
  50.         tile
  51.       >
  52.         Flex item
  53.       </v-card>
  54.     </v-card>
  55.   </div>
  56. </template>

Flex - 图8

使用 align-items

混合 flex-direction: column 和 align-items，你能够使用 .mt-auto 和 .mb-auto 助手类来挑战 flex 项的位置。

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-start flex-column mb-6"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 3"
  12.         :key="n"
  13.         :class="n === 1 && 'mb-auto'"
  14.         class="pa-2"
  15.         outlined
  16.         tile
  17.       >
  18.         Flex item
  19.       </v-card>
  20.     </v-card>
  21.     <v-card
  22.       class="d-flex align-end flex-column"
  23.       color="grey lighten-2"
  24.       flat
  25.       tile
  26.       height="200"
  27.     >
  28.       <v-card
  29.         v-for="n in 3"
  30.         :key="n"
  31.         :class="n === 3 && 'mt-auto'"
  32.         class="pa-2"
  33.         outlined
  34.         tile
  35.       >
  36.         Flex item
  37.       </v-card>
  38.     </v-card>
  39.   </div>
  40. </template>

Flex - 图9

Flex wrap

默认的 .d-flex 没有提供任何包装元素（其行为类似于 flex-wrap: nowrap）。这可以通过使用 flex-{condition} 格式的 flex-wrap 助手类来修改。条件可以是 nowrap, wrap, 或者 wrap-reverse。

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex flex-nowrap py-3"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       width="125"
  9.     >
  10.       <v-card
  11.         v-for="n in 5"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图10

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.     >
  9.       <v-card
  10.         v-for="n in 20"
  11.         :key="n"
  12.         class="pa-2"
  13.         outlined
  14.         tile
  15.       >
  16.         Flex item
  17.       </v-card>
  18.     </v-card>
  19.   </div>
  20. </template>

Flex - 图11

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex flex-wrap-reverse"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.     >
  9.       <v-card
  10.         v-for="n in 20"
  11.         :key="n"
  12.         class="pa-2"
  13.         outlined
  14.         tile
  15.       >
  16.         Flex item
  17.       </v-card>
  18.     </v-card>
  19.   </div>
  20. </template>

Flex - 图12

这些助手类也同样可以使用 flex-{breakpoint}-{condition} 的格式来创建基于断点的响应式增强变量。以下组合可用：

  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Flex order

您可以使用 order 工具更改 flex items 的可视顺序。

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex flex-wrap-reverse"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.     >
  9.       <v-card
  10.         class="order-3 pa-2"
  11.         outlined
  12.         tile
  13.       >
  14.         First flex item
  15.       </v-card>
  16.       <v-card
  17.         class="order-2 pa-2"
  18.         outlined
  19.         tile
  20.       >
  21.         Second flex item
  22.       </v-card>
  23.       <v-card
  24.         class="order-1 pa-2"
  25.         outlined
  26.         tile
  27.       >
  28.         Third flex item
  29.       </v-card>
  30.     </v-card>
  31.   </div>
  32. </template>

Flex - 图13

order 也有响应式变化。

  • .order-first
  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-last
  • .order-sm-first
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-sm-last
  • .order-md-first
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-md-last
  • .order-lg-first
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-lg-last
  • .order-lg-first
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12
  • .order-xl-last

Flex align content

可以使用 flex align-content 类更改 align-content 的 flex 设置。默认情况下，这将修改 x-axis 上的 flexbox items，但在使用 flex-direction: column 时将反转，从而修改 y-axis。在 start（浏览器默认）,end, center, between, around 或者 stretch 中进行选择。

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-content-start flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       min-height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 20"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图14

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-content-end flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       min-height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 20"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图15

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-content-center flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       min-height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 20"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图16

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-content-space-between flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       min-height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 20"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图17

template

  1. <template>
  2.   <div>
  3.     <v-card
  4.       class="d-flex align-content-space-around flex-wrap"
  5.       color="grey lighten-2"
  6.       flat
  7.       tile
  8.       min-height="200"
  9.     >
  10.       <v-card
  11.         v-for="n in 20"
  12.         :key="n"
  13.         class="pa-2"
  14.         outlined
  15.         tile
  16.       >
  17.         Flex item
  18.       </v-card>
  19.     </v-card>
  20.   </div>
  21. </template>

Flex - 图18

align-content 也有响应式变化。

  • align-content-start
  • align-content-end
  • align-content-center
  • align-content-space-between
  • align-content-space-around
  • align-content-stretch
  • align-sm-content-start
  • align-sm-content-end
  • align-sm-content-center
  • align-sm-content-space-between
  • align-sm-content-space-around
  • align-sm-content-stretch
  • align-md-content-start
  • align-md-content-end
  • align-md-content-center
  • align-md-content-space-between
  • align-md-content-space-around
  • align-md-content-stretch
  • align-lg-content-start
  • align-lg-content-end
  • align-lg-content-center
  • align-lg-content-space-between
  • align-lg-content-space-around
  • align-lg-content-stretch
  • align-xl-content-start
  • align-xl-content-end
  • align-xl-content-center
  • align-xl-content-space-between
  • align-xl-content-spacearound
  • align-xl-content-stretch

Flex grow and shrink

Vuetify 有一些辅助类，用于手动应用扩展和收缩。这些可以通过添加 flex-{condition}-{value} 帮助类来应用，其中条件可以是 grow 或 shrink，值可以是 0 或者 1 。条件 grow 将允许元素扩大以填充可用空间，而 shrink 将允许元素收缩到其内容所需的空间。但是，只有当元素必须收缩以适应其容器时才会发生这种情况，例如容器大小调整或受到 flex-grow-1 的影响。0 将阻止条件发生，而 1 将允许条件发生。有以下类可供选择：

  • flex-grow-0
  • flex-grow-1
  • flex-shrink-0
  • flex-shrink-1

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters style="flex-wrap: nowrap;">
  4.       <v-col
  5.         cols="2"
  6.         class="flex-grow-0 flex-shrink-0"
  7.       >
  8.         <v-card
  9.           class="pa-2"
  10.           outlined
  11.           tile
  12.         >
  13.           I'm 2 column wide
  14.         </v-card>
  15.       </v-col>
  16.       <v-col
  17.         cols="1"
  18.         style="min-width: 100px; max-width: 100%;"
  19.         class="flex-grow-1 flex-shrink-0"
  20.       >
  21.         <v-card
  22.           class="pa-2"
  23.           outlined
  24.           tile
  25.         >
  26.           I'm 1 column wide and I grow to take all the space
  27.         </v-card>
  28.       </v-col>
  29.       <v-col
  30.         cols="5"
  31.         style="min-width: 100px;"
  32.         class="flex-grow-0 flex-shrink-1"
  33.       >
  34.         <v-card
  35.           class="pa-2"
  36.           outlined
  37.           tile
  38.         >
  39.           I'm 5 column wide and I shrink if there's not enough space
  40.         </v-card>
  41.       </v-col>
  42.     </v-row>
  43.   </v-container>
  44. </template>

Flex - 图19

这些助手类还可以以 flex-{breakpoint}-{condition}-{state} 的格式应用，以创建基于断点的响应性更好的变量。下列组合可供选择：

  • flex-sm-grow-0
  • flex-md-grow-0
  • flex-lg-grow-0
  • flex-xl-grow-0
  • flex-sm-grow-1
  • flex-md-grow-1
  • flex-lg-grow-1
  • flex-xl-grow-1
  • flex-sm-shrink-0
  • flex-md-shrink-0
  • flex-lg-shrink-0
  • flex-xl-shrink-0
  • flex-sm-shrink-1
  • flex-md-shrink-1
  • flex-lg-shrink-1
  • flex-xl-shrink-1

Charcoal Vuetify Beanie

Stay warm with the new Premium Knit Vuetify Beanie available in black, navy and charcoal.

ads by Vuetify

](https://store.vuetifyjs.com/product/premium-charcoal-vuetify-beanie?ref=vuetifyjs.com)