[Vuejs]-Vuetify vflex align-self-end doesnot work

by

0👍

✅

It is at the end of v-layout, but v-layout is only as big as it needs to be because you didn’t set a height attribute on it nor v-container.

Also, because v-flex items have a flex-grow property of 1, they will fill all the remaining space, meaning that there is no empty space left to ‘align’ the separate items.

Finally, you’re working with Vuetify 0.16.6 (in your fiddle), which doesn’t have the align-self-xxxxx props according to the v1 Vuetify docs.

What you can do in your situation, is use the flex-grow: 1 property of the first v-flex item, and replace the thing you want at the bottom with a normal div (which has flex:grow: 0) so it’s automatically pushed to the bottom.

Alternatively: get rid of the v-flex altogether, because you’re not using the column as a grid, so you don’t need the subdivisions. Then use justify-space-between on the column layout.

<div id="app">
  <v-container fluid style="height: 400px;">
    <v-layout class="fill-height layout" column>
      <v-flex shrink class="topitem">
        <v-layout class="layout" row>
          <v-flex xs12>
            <v-btn primary dark>Normal vflex 1</v-btn>
          </v-flex>
          <v-flex xs12>
            <v-btn primary dark>Normal vflex 2</v-btn>
          </v-flex>
        </v-layout>
      </v-flex>
      <div class="bottomitem">
        <v-btn primary dark>Should be fixed to bottom</v-btn>
      </div>
    </v-layout>
  </v-container>
</div>

Here’s a working fiddle that achieves what you want: https://jsfiddle.net/q69wuk28/13/

Here’s an article about flexbox, which is used by vuetify’s v-layout/v-flex components: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0👍

<div id="app">
 <v-container fluid pa-0 ma-0 style="backgroundColor:yellow"> 
    <v-layout class='page' pa-0 ma-0 style="backgroundColor:red;height:100vh" column >
      <v-flex xs12 pa-0 ma-0> 
        <v-layout pa-0 ma-0 row>
             <v-flex xs12 pa-0 ma-0><v-btn primary dark>Normal vflex 1</v-btn></v-flex>
             <v-flex xs12 pa-0 ma-0 ><v-btn primary dark>Normal vflex 2</v-btn></v-flex>
        </v-layout>
      </v-flex>
      <v-flex xs12 pa-0 ma-0 style="display:flex">
            <v-btn style="align-self:flex-end" primary dark>Should be fixed to bottom</v-btn></v-flex>
    </v-layout>
   </v-container>
</div>

Your problems:

  1. container was not on a full page
  2. Vuetify deprecate v-flex block, now you can add to classes ‘.d-flex’, position too writing in a class like “justify-space-between”

Leave a comment