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

You have to use text-xs-right in <v-flex> tag instead of align-end (see https://vuetifyjs.com/ru/layout/alignment).

Answer 2

If you wanna align your element to the right-bottom corner, you can do it like this:

<v-img height="120px" class="white--text" :src="xxxx.img">
    <v-layout fill-height column ma-0 >
      <v-spacer></v-spacer>
      <v-flex class="text-xs-right" shrink>
        <span class="grey darken-4">XXXXX</span>
      </v-flex>
    </v-layout>
</v-img>

Answer 3

Kael answer here is good, but I feel like there is more to be explained here.

First problem here is using xs3 offset-xs9:

<v-flex xs3 offset-xs9 align-end>

This will not allow us to use the flexbox grid system to place the content in a meaningful place (as you have described yourself).

The second problem was misusing Vuetify's flexbox grid properties correctly, for example, using the align-end on both v-layout and v-flex.

<v-layout row wrap  align-end>
      <v-flex xs3 offset-xs9 align-end>

Here's what we are after:

1. A layout that will place all content in the far right of itself
2. A container that will take up only the needed size of its content

Accomplishing these two objectives, will assure that your content will placed in the right end of the v-layout container, and you will avoid all kinds of weird spaces using xs3 and offset-xs-9 and so on.

So, for the v-layout, as Kael mentioned, we need to use justtify-end. Since your v-layout's direction is row, we use justify for horizontal positioning.

And for the v-flex we need to make sure it only takes up the width of its content. We'll use shrink for that, so the final template should look like this:

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

    <v-layout row wrap justify-end>
      <v-flex shrink>
        <v-btn primary dark>Normal</v-btn>
      </v-flex>
    </v-layout>

  </v-app>
</div>

Answer 4

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.

Answer 5

You can also use v-spacer to push anything to right side.

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

    <v-layout>
      <v-spacer></v-spacer>
      <v-btn primary dark>Normal</v-btn>
    </v-layout>

  </v-app>
</div>

Answer 6

Try this:

<p class="text-xs-right">
      <v-btn class="d-inline-block">Normal</v-btn>
</p>