Vuetify — Flexbox

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Flex Justify

We can justify-content in a flexbox container with the classes provided by Vuetify.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          v-for="j in justify"
          :key="j"
          :class="`d-flex justify-${j} mb-2`"
          color="grey lighten-2"
          flat
          tile
        >
          <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    justify: ["start", "end", "center", "space-between", "space-around"],
  }),
};
</script>

to set the justification of our content to what we want.

There are also responsive variants of the classes.

Flex Align

Vuetify also provides us with flex align classes to align content.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          v-for="a in align"
          :key="a"
          :class="`d-flex align-${a} mb-6`"
          flat
          height="100"
          tile
        >
          <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    align: ["start", "end", "center", "baseline", "stretch"],
  }),
};
</script>

to align our content our way.

We have the d-flex and align classes to align the containers in various ways.

Flex Align Self

We can use the align-self classes to apply the align-self property.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          v-for="j in justify"
          :key="j"
          class="d-flex mb-6"
          height="100"
        >
          <v-card
            v-for="n in 3"
            :key="n"
            class="pa-2"
            :class="[n === 1 && `align-self-${j}`]"
          >{{ n === 1 ? 'Aligned flex item' : 'Flex item' }}</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    justify: ["start", "end", "center", "baseline", "auto", "stretch"],
  }),
};
</script>

We have the align-self classes to align the classes our way.

Flex Wrap

Vuetify also provides the flex wrap classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex flex-nowrap py-3" color="grey lighten-2" flat tile>
          <v-card v-for="n in 5" :key="n" class="pa-2" outlined tile>Flex item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    justify: ["start", "end", "center", "baseline", "auto", "stretch"],
  }),
};
</script>

We have the flex-nowrap to prevent wrapping.

The general format of the classes is flex-{breakpoint}-{condition} .

Flex Order

We can switch the visual order of the flex items with the order classes.

So we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex flex-wrap-reverse" color="grey lighten-2" flat tile>
          <v-card class="order-3 pa-2" outlined tile>First</v-card>
          <v-card class="order-2 pa-2" outlined tile>Second</v-card>
          <v-card class="order-1 pa-2" outlined tile>Third</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
  }),
};
</script>

We flipped the order with the flex-wrap-reverse class.

Conclusion

Vuetify provides us with various flexbox utilities to lay out our items.