Why align-end does not work in vuetify

Question

I use vuetify layout, and I wanna make button at right side, but I found align-end which is vuetify property does not work, I use offset-xs9 to make button right side, but the button is being center in v-flex, how to make it on end ? help thanks

code like:

<div id="app">
  <v-app id="inspire">

    <v-layout row wrap  align-end>
      <v-flex xs3 offset-xs9 align-end>
        <div>
          <v-btn primary dark>Normal</v-btn>
        </div>
      </v-flex>
    </v-layout>

  </v-app>
</div>

and online codepen

Answer 1

Vuetify's grid uses flexbox.

• align-* operates on the vertical axis
• you want to use justify-* for the child to translate it horizontally
• align-* and justify-* only work on flex containers, so you can either use a v-layout instead of the v-flex, or just use both attributes on the same v-layout

Here is a fixed pen for you.