web-dev-qa-db-fra.com

Pourquoi align-end ne fonctionne pas dans vuetify

J'utilise la disposition vuetify, et je veux créer un bouton à droite, mais j'ai trouvé align-end qui est la propriété vuetify ne fonctionne pas, j'utilise offset-xs9 pour faire le bouton à droite, mais le bouton est au centre dans v-flex, comment y arriver? aide merci

code comme:

<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>

et codepen en ligne

vuetify.js
6
Roy

La grille de Vuetify utilise flexbox .

  • align-* fonctionne sur l'axe vertical
  • vous souhaitez utiliser justify-* pour que l'enfant le traduise horizontalement
  • align-* et justify-* ne fonctionne que sur les conteneurs flexibles, vous pouvez donc utiliser un v-layout à la place du v-flex, ou utilisez simplement les deux attributs sur le même v-layout

Voici un stylo fixe pour vous.

23
Kael Watts-Deuchar

La réponse de Kael ici est bonne, mais j'ai l'impression qu'il y a plus à expliquer ici.

Le premier problème ici est d'utiliser xs3 offset-xs9:

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

Cela ne nous permettra pas d'utiliser le système de grille flexbox pour placer le contenu à un endroit significatif (comme vous l'avez décrit vous-même).

Le deuxième problème était une mauvaise utilisation des propriétés de la grille flexbox) de Vuetify correctement, par exemple, en utilisant le align-end à la fois v-layout et v-flex.

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

Voici ce que nous recherchons:

  1. Une mise en page qui placera tout le contenu à l'extrême droite de lui-même
  2. Un conteneur qui ne prendra que la taille nécessaire de son contenu

La réalisation de ces deux objectifs garantira que votre contenu sera placé à l'extrémité droite du v-layout conteneur, et vous éviterez toutes sortes d'espaces étranges en utilisant xs3 et offset-xs-9 etc.

Donc, pour le v-layout, comme Kael l'a mentionné, nous devons utiliser justtify-end. Depuis votre v-layout a pour direction row, nous utilisons justify pour le positionnement horizontal.

Et pour le v-flex nous devons nous assurer qu'il ne prend que la largeur de son contenu. Nous utiliserons shrink pour cela, donc le modèle final devrait ressembler à ceci:

<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>
4
Narxx

Vous devez utiliser text-xs-right dans <v-flex> tag au lieu de align-end (voir https://vuetifyjs.com/ru/layout/alignment ).

4
Serge

Essaye ça:

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

Si vous voulez aligner votre élément dans le coin inférieur droit, vous pouvez le faire comme ceci:

<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>
1
sonic