CSS Flexbox et Grid : l'art de créer des mises en page réactives

Disposition flexible

affichage: flexible

Activez le mode de mise en page Flex. Définissez un élément en tant que conteneur Flex et ses éléments enfants directs deviendront des éléments Flex.

.container {
    display: flex;
}

direction flexible

Définit la direction de l'axe principal (la direction de la disposition des éléments). Valeurs facultatives :

• ligne (par défaut) : horizontale, de gauche à droite.
• ligne-inverse : horizontale, de droite à gauche.
• colonne : verticale, de haut en bas.
• colonne inversée : verticale, de bas en haut.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

emballage flexible

Contrôle s'il faut effectuer un retour à la ligne lorsqu'il n'y a pas assez d'espace dans une rangée. Valeurs facultatives :

• nowrap (par défaut) : pas d'emballage, les éléments peuvent déborder du conteneur.
• wrap : envelopper, les éléments sont disposés sur plusieurs rangées.
• wrap-reverse : enveloppe, la première ligne est en bas et les lignes suivantes sont disposées vers le haut.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

justifier-contenu

Définit l'alignement sur l'axe principal. Valeurs facultatives :

• flex-start (par défaut) : les éléments sont alignés sur le point de départ.
• flex-end : les éléments sont alignés sur le point final.
• centre : les éléments sont alignés au centre.
• espace entre : répartissez uniformément l'espacement entre les éléments, le premier et le dernier élément sont respectivement attachés aux extrémités du conteneur.
• Espace autour : répartissez uniformément l'espacement entre les éléments, l'espacement des deux côtés des éléments est égal.
• Espace uniformément : répartissez uniformément l'espacement entre les éléments, l'espacement entre les éléments et le bord du conteneur et entre les éléments est égal.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

aligner les éléments

Définit l'alignement sur l'axe transversal. Valeurs facultatives :

• étirer (par défaut) : les éléments s'étirent pour remplir tout l'axe transversal.
• flex-start : les éléments s'alignent sur le début de l'axe transversal.
• flex-end : les éléments s'alignent sur la fin de l'axe transversal.
• centre : les éléments sont centrés sur l'axe transversal.
• baseline : les éléments sont alignés par baseline.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

aligner le contenu

Fonctionne uniquement dans la disposition Flex multiligne (flex-wrap: wrap), définit l'alignement des éléments multilignes sur l'axe transversal. Valeurs facultatives :

• étirer (par défaut) : chaque ligne s'étire pour remplir tout l'axe transversal.
• flex-start : chaque ligne s'aligne sur le début de l'axe transversal.
• flex-end : chaque ligne s'aligne sur la fin de l'axe transversal.
• centre : chaque ligne s'aligne au centre de l'axe transversal.
• Espace entre : répartissez uniformément l'espace entre chaque rangée, et la première et la dernière rangée sont respectivement attachées aux deux extrémités du conteneur.
• espace autour : répartissez uniformément l'espace entre chaque rangée, et l'espace des deux côtés de la rangée est égal.

.container {
    display: flex;
}

commande

Définit l'ordre des éléments. Plus la valeur est petite, plus l'ordre est élevé. La valeur par défaut est 0.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

croissance flexible

Définit le taux d'agrandissement de l'élément. La valeur par défaut est 0, ce qui signifie aucun agrandissement. Si tous les éléments sont définis sur des valeurs non nulles, l'espace restant est distribué proportionnellement.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-rétrécissement

Définit le taux de retrait de l'article. La valeur par défaut est 1, ce qui signifie qu'il peut être réduit. Si tous les éléments sont définis sur des valeurs non nulles, ils rétrécissent proportionnellement pour éviter le débordement du conteneur.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

base flexible

Définit la taille initiale de l'élément avant que l'espace restant ne soit distribué. Accepte les valeurs de longueur, de pourcentage, automatique (par défaut) ou de contenu.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

fléchir

Raccourci pour flex-grow, flex-shrink et flex-basis. La valeur par défaut est 0 1 auto.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

s'aligner

Remplace la propriété align-items du conteneur pour définir l'alignement d'un seul élément sur l'axe transversal. Les valeurs facultatives sont les mêmes que celles des align-items.

.item {
    order: <integer>;
}

Disposition de la grille

affichage : grille ;

Activez le mode de disposition Grille. Définissez un élément comme conteneur de grille et ses enfants directs deviendront des éléments de grille (cellules).

.item {
    flex-grow: <number>; /* Default is 0 */
}

colonnes de modèle de grille et lignes de modèle de grille

Définissez la taille des pistes de colonnes et de lignes de la grille. Accepte la longueur, le pourcentage, fr (unité de fraction, représentant la fraction de l'espace de la grille) ou les valeurs automatiques. Vous pouvez également utiliser la fonction repeat() pour créer des pistes répétées et la fonction minmax() pour définir la taille minimale et maximale de la piste.

.item {
    flex-shrink: <number>; /* defaults to 1 */
}

zones de modèle de grille

Définissez la zone de la disposition de la grille en nommant l'élément et en décrivant la structure de la grille avec une chaîne. Le nom de l'élément utilise . pour représenter une cellule vide.

.item {
    flex-basis: <length> | <percentage> | auto | content;
}

espace de grille ou espace de colonne de grille et espace de ligne de grille

Définissez l'écart entre les éléments de la grille. Accepte la longueur ou la valeur en pourcentage.

.container {
    display: flex;
}

grille-auto-colonnes et grille-auto-lignes

Définissez la taille de la piste des lignes ou colonnes nouvellement ajoutées lors du remplissage automatique de la grille. Prend effet lorsque l'élément dépasse la plage de grille définie.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

grille-auto-flux

Contrôle la façon dont les éléments de la grille sont automatiquement remplis et organisés. Valeurs facultatives :

• ligne (par défaut) : remplir par ligne.
• colonne : remplir par colonne.
• dense : lorsqu'une ligne ou une colonne est utilisée avec dense, s'il y a des lacunes dans la grille, de nouveaux éléments tenteront de combler ces lacunes au lieu de simplement les ajouter à la fin de la grille.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

début de colonne de grille, fin de colonne de grille, début de ligne de grille et fin de ligne de grille

Spécifiez manuellement les positions de début et de fin des éléments dans la grille.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

zone de grille

Propriété abrégée permettant de définir simultanément Grid-row-start, Grid-column-start, Grid-row-end et Grid-column-end, ou de référencer le nom de la zone défini dans Grid-template-areas.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

Grille CSS combinée avec Flexbox

Dans certains cas, nous pouvons combiner les avantages de CSS Grid et Flexbox pour créer des mises en page réactives plus complexes.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

Tout d'abord, CSS Grid est utilisé pour créer une disposition en grille avec une largeur de colonne adaptative. Chaque élément de grille (élément enfant) utilise Flexbox à l'intérieur pour centrer verticalement le contenu. Lorsque la largeur de l'écran est inférieure à 768 px, la requête multimédia passe à une disposition en une seule colonne pour s'adapter aux appareils mobiles.

Sélection Flexbox ou Grille

Le choix d'utiliser Flexbox ou Grid dépend généralement de besoins spécifiques :

• Flexbox convient à la gestion des dispositions unidimensionnelles, telles que la disposition des éléments en lignes ou en colonnes, ainsi que l'alignement et le remplissage des éléments.
• CSS Grid est plus adapté à la gestion de dispositions bidimensionnelles, telles que des tableaux ou des dispositions de grille complexes, et à un contrôle précis des cellules.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!