Flex

En utilisant les utilitaires display, vous pouvez transformer n'importe quel élément en un conteneur flexbox transformant direct children elements en objets flex. En utilisant des utilitaires de propriétés flex supplémentaires, vous pouvez personnaliser leur interaction encore plus loin.

Vous pouvez également personnaliser les utilitaires flex pour s'appliquer en fonction de différents points d'arrêt.

Par défaut, d-flex applique flex-direction: row et peut généralement être omis. Cependant, il peut y avoir des situations où vous devez explicitement le définir.

Les classes utilitairesflex-column et flex-column-reverse peuvent être utilisées pour changer l'orientation du conteneur flexbox. Gardez à l'esprit que IE11 et Safari peuvent avoir des problèmes avec la direction de la colonne.

Il y a aussi des variations réactives pour flex-direction.

Le paramètre flex justify-content peut être modifié en utilisant les classes de justification flex. Cela modifiera par défaut les éléments flexbox sur les x-axis mais est inversé lorsque vous utilisez flex-direction: column, en modifiant les y-axis. Choisissez parmi start (par défaut du navigateur), end, center, between, ou around.

Il y a aussi des variations réactives pour justify-content.

Le paramètre flex align-items peut être modifié en utilisant les classes flex align. Cela par défaut modifiera les éléments flexbox sur le y-axis mais est inversé lors de l'utilisation de flex-direction: colonne, modifiant le x-axis. Choisissez parmi start, end, center, baseline, ou stretch (navigateur par défaut).

Il y a aussi des variations réactives pour align-items.

Le paramètre flex align-self peut être modifié en utilisant les classes flex align-self. Cela par défaut modifiera les éléments flexbox sur l'axe x mais est inversé lorsque vous utilisez flex-direction: colomn, modifiant y-axis. Choisissez parmi start, end, center, baseline, auto, ou stretch (par défaut sur navigateur).

Il y a aussi des variations réactives pour align-self-items.

En utilisant les classes d'aide de marge dans un conteneur flexbox, vous pouvez contrôler le positionnement des éléments flex sur les x-axis ou y-axis en utilisant respectivement flex-row ou flex-column.

Mélanger les classes d'aide flex-direction: column et align-items, vous pouvez utiliser les classes d'aide .mt-auto et .mb-auto pour ajuster le positionnement des éléments flex.

Par défaut .d-flex ne fournit aucun emballage (se comporte de la même manière que flex-wrap: nowrap). Cela peut être modifié en appliquant des classes d'aide flex-wrap au format flex-{condition} où la condition peut être nowrap, wrap, ou wrap-reverse.

Ces classes d'aide peuvent également être appliquées au format flex-{breakpoint}-{condition} pour créer des variations plus réactives basées sur des points d'arrêt. Les combinaisons suivantes sont disponibles :

Vous pouvez modifier l'ordre visuel des objets flex avec les utilitaires order.

Il y a aussi des variations réactives pour order.

Le paramètre flex align-content peut être modifié en utilisant les classes flex align-content. Cela par défaut modifiera les éléments flexbox sur l'axe x mais est inversé lorsque vous utilisez flex-direction: colomn, modifiant les axes y-axis. Choisissez parmi start (par défaut), end, center, entre, around ou stretch.

Il y a aussi des variations réactives pour align-content.

Vuetify a des classes d'aide pour appliquer la croissance et le rétrécissement manuellement. Ceux-ci peuvent être appliqués en ajoutant la classe d'aide au format flex-{condition}-{value}, où la condition peut être soit grow ou shrink et la valeur peut être soit 0 ou 1. La condition grow permettra à un élément de se développer pour remplir l'espace disponible, tandis que Shrnk permettra à un élément de se rétracter à seulement l'espace nécessaire pour son contenu. Cependant, cela ne se produira que si l'élément doit se rétrécir pour s'adapter à son conteneur, comme une résine de conteneur ou être effectué par un flex-grow-1. La valeur 0 empêchera l'apparition de la condition alors que 1 permettra la condition. Les classes suivantes sont disponibles :

Ces classes d'aide peuvent également être appliquées au format flex-{breakpoint}-{condition}-{state} pour créer des variations plus réactives basées sur des points d'arrêt. Les combinaisons suivantes sont disponibles :