Выровняйте компоненты по правому краю с помощью Vuetify.js

Question

Я пытаюсь выровнять ряд переключателей в сетке Vuetify:

<v-layout row wrap align-start justify-end fill-height>
   <v-flex xs12 class="text-xs-right">
      <v-radio-group row hide-details>
         <v-radio label="Public"></v-radio>
         <v-radio label="Private"></v-radio>
      </v-radio-group>                    
   </v-flex>
</v-layout>

Хотя они всегда остаются слева. Как достигается правильное выравнивание?

Скрипка здесь:

https://jsfiddle.net/80mq5rhf/

Answer 1

Вы можете поместить <v-spacer> в свой <v-radio-group>. Это заполнит доступное пространство слева от кнопок.

<v-radio-group row>
  <v-spacer></v-spacer>
  <v-radio label="Public"></v-radio>
  <v-radio label="Private"></v-radio>
</v-radio-group>

Другим способом было бы добавить смещение к вашему <v-flex>

<v-flex xs12 offset-xs8>
  <v-radio-group row>
    <v-radio label="Public"></v-radio>
    <v-radio label="Private"></v-radio>
  </v-radio-group>                    
</v-flex>