web-dev-qa-db-fra.com

Centrage vertical Vuetify dans l'élément v-flex

J'essaie d'utiliser un espace vertical entre mes composants , ou du moins d'utiliser les capacités flexbox de le cadre.

Voici ce que je veux réaliser avec une image, la première image représente ce que j'ai avec mon code actuel et la seconde est ce que je veux réaliser:

enter image description here

Voici le balisage de base que j'ai écrit, je l'ai reproduit sur un jsFiddle si vous voulez jouer avec: https://jsfiddle.net/tgpfhn8m/357/

<v-layout row wrap>
  <v-flex xs8>
    <v-card class="red" height="400px">
      Fixed Height Card
    </v-card>
  </v-flex>
  <v-flex xs4 class="purple">
    <v-card class="green">
        First Card
    </v-card>
    <v-card class="green">
        Second Card
    </v-card>
  </v-flex>
</v-layout>

Qu'est-ce que j'ai essayé?

J'ai essayé différentes méthodes. Le premier consistait à inclure un v-layout:column dans la deuxième colonne et appliquez un justify-space-between à elle. Sans succès ( https://jsfiddle.net/tgpfhn8m/358/ ):

<v-flex xs4 class="purple">
  <v-layout column justify-space-between>
    <v-card class="green">
      First Card
    </v-card>
    <v-card class="green">
        Second Card
    </v-card>
  </v-layout>
</v-flex>

J'ai essayé beaucoup d'autres combinaisons d'éléments et de propriétés, sans succès non plus.

Que fais-je de mal? Est-il même possible de réaliser ce que je veux avec des éléments Vuetify natifs?

vuetify.js
8
Hammerbot

Vous devez supprimer le milieu v-flex.

Vous pouvez également utiliser align-end sur un v-layout avec la dernière carte dedans.

Si vous souhaitez conserver le remplissage entre les deux colonnes, vous pouvez ajouter la classe pr-x avec x un nombre compris entre 0 et 5 au premier v-flex.

Pour que la deuxième colonne remplisse la hauteur, utilisez fill-height sur le v-layout enveloppé dans un v-flex.

violon avec rembourrage

Doc d'espacement de Vuetify

Réponse du code: 

<v-app>
   <v-layout row wrap >
      <v-flex xs8 class="pr-3">
         <v-card class="red" height="400px">
            Fixed Height Card
         </v-card>
      </v-flex>
      <v-flex >
         <v-layout column justify-space-between class="purple" fill-height>
            <v-card class="green">
               First Card
            </v-card>
            <v-card class="green">
               Second Card
            </v-card>
         </v-layout>
      </v-flex>
   </v-layout>
</v-app>
8
Toodoo

Pour tous ceux qui ont besoin de ces conseils:

Utilisation <v-layout align-center> ensemble avec <v-flex fill-height>

Cela aligne verticalement les enfants:

<v-layout align-center>
  <v-flex fill-height></v-flex>
  <v-flex fill-height></v-flex>
</v-layout>
6
d-_-b