Table des matières:

Qu'est-ce qu'un conteneur Flexbox ?
Qu'est-ce qu'un conteneur Flexbox ?

Vidéo: Qu'est-ce qu'un conteneur Flexbox ?

Vidéo: Qu'est-ce qu'un conteneur Flexbox ?
Vidéo: Les conteneurs flexbox d'elementor 2024, Novembre
Anonim

UNE conteneur flexible agrandit les éléments pour remplir l'espace libre disponible ou les rétrécit pour éviter les débordements. Plus important encore, le boîte flexible la mise en page est indépendante de la direction par opposition aux mises en page régulières (bloc qui est basé verticalement et en ligne qui est basé horizontalement).

À cet égard, comment utilisez-vous Flexbox ?

Sommaire

  1. Utiliser l'affichage: flex; pour créer un conteneur flexible.
  2. Utilisez justifier-content pour définir l'alignement horizontal des éléments.
  3. Utilisez align-items pour définir l'alignement vertical des éléments.
  4. Utilisez flex-direction si vous avez besoin de colonnes au lieu de lignes.
  5. Utilisez les valeurs d'inversion de ligne ou de colonne pour inverser l'ordre des éléments.

comment faire un conteneur Flex ? Avant de pouvoir utiliser n'importe quel boîte flexible propriété, vous devez définir une conteneur flexible dans votre mise en page. Tu créer un conteneur flexible en définissant la propriété display d'un élément sur l'un des boîte flexible valeurs de mise en page: fléchir ou en ligne- fléchir . Par défaut, fléchir les éléments sont disposés horizontalement sur l'axe principal de gauche à droite.

De cette manière, à quoi sert Flexbox ?

Boîte flexible est un modèle de mise en page qui permet aux éléments d'aligner et de répartir l'espace dans un conteneur. En utilisant des largeurs et des hauteurs flexibles, les éléments peuvent être alignés pour remplir un espace ou répartir l'espace entre les éléments, ce qui en fait un excellent outil pour utiliser pour systèmes de conception réactifs.

Quelle est l'orientation par défaut dans un conteneur Flex ?

Les défaut disposition après application de l'affichage: fléchir est pour que les éléments soient disposés le long de l'axe principal de gauche à droite. L'animation ci-dessous montre ce qui se passe lorsque fléchir - direction : la colonne est ajoutée au récipient élément. Vous pouvez également définir la flexibilité - direction à l'inversion de ligne et à l'inversion de colonne.

Conseillé: