Comment utiliser Flex pour aligner des éléments HTML

Les propriétés flexibles de CSS vous permettent d'aligner les éléments de manière plus flexible et plus réactive. Cela le rend utile lorsque vous souhaitez que vos éléments HTML soient plus réactifs dans le navigateur Web.

Cet article explique comment vous pouvez utiliser certaines propriétés flexibles. Cela inclut les propriétés flex-direction, justifier-content, align-self, align-items, align-content et gap.

Comment configurer l'affichage CSS Flex

Un exemple de structure que vous pouvez utiliser pour explorer les bases de la flexbox est un ensemble de divs enfants sous un seul div parent. Dans le code ci-dessous, il y a une div "parent" principale. Les trois divs enfants représentent des éléments que vous pouvez aligner à l'aide des propriétés flexibles.

Pour que tout style flexible fonctionne, vous devrez ajouter le affichage: flexible propriété au conteneur flex parent.

.parent {
 affichage: flexible ;
}

Sans flex, les divs enfants s'affichent les uns après les autres dans une formation de colonne vers le bas de la page.

Pour afficher un exemple de cette configuration, affichez et exécutez le code dans ce Extrait CodePen.

Comment contrôler la direction de la mise en page

Le flex-direction La propriété détermine la direction des lignes ou des colonnes des éléments enfants.

Les options de la propriété flex-direction incluent :

flex-direction: rangée | colonne | ligne-inverse | colonne-inverse

Vous devrez ajouter un conteneur parent entourant les éléments que vous souhaitez aligner.

HTML :

CSS :

.red { couleur de fond: rouge; }
.orange { couleur de fond: orange; }
.jaune { couleur de fond: jaune; }
.green { couleur de fond: vert ;}
.blue { background-color: bleu; }
.purple { couleur de fond: violet; }
.div parent {
 largeur: 40px ;
 hauteur: 40px ;
}

Appliquez la propriété flex-direction au conteneur flexible parent. Cela alignera les éléments div enfants.

.parent {
 largeur: 300 pixels ;
 affichage: flexible; 
 flex-direction: ligne ;
}

De nombreuses propriétés flexibles font référence au concept d'axe principal et d'axe transversal. Lorsque la direction de flexion est rangée, l'axe principal représente la direction horizontale et l'axe transversal représente la verticale. Une valeur de colonne commute ces axes.

Affichez le code de la propriété flex-direction dans ce Extrait CodePen pour voir quelques exemples.

Comment aligner les éléments le long de l'axe transversal

Le aligner les éléments La propriété contrôle l'alignement des éléments le long de l'axe transversal. Pour la valeur par défaut flex-direction, row, align-items contrôle l'alignement vertical des éléments.

Les options de la propriété align-items incluent :

align-items: flex-start | extrémité flexible | align-items | s'étirer

Ajoutez la propriété align-items au conteneur parent pour aligner ses enfants.

.parent {
 affichage: flexible; 
 align-items: flex-start ;
}

De plus, vous pouvez choisir d'aligner les éléments à l'aide d'une ligne de base. Par défaut, l'option de ligne de base aligne tous les éléments en fonction de la base des éléments.

Vous pouvez également choisir le point de départ de la ligne de base, par exemple le haut (première ligne de base) ou le bas (dernière ligne de base).

align-items: ligne de base | première ligne de base | dernière ligne de base ;

Pour align-items: baseline pour fonctionner, assurez-vous que chaque élément a une hauteur ou une largeur différente (selon l'axe que vous utilisez).

​​​

Affichez le code de la propriété align-items dans ce Extrait CodePen pour voir quelques exemples.

Comment remplacer l'alignement sur des éléments individuels

Vous pouvez utiliser le s'aligner propriété pour remplacer tout style align-items du conteneur parent. Cela signifie que vous pouvez définir un alignement flexible séparé sur un élément individuel.

Les options de la propriété align-self incluent :

align-self: auto | flex-start | extrémité flexible | centre | ligne de base | s'étirer

Supposons, par exemple, que le conteneur parent ait un style flex-direction défini sur "row".

.parent {
 affichage: flexible; 
 flex-direction: ligne ;
}

Vous pouvez appliquer la propriété align-self sur l'élément individuel. L'élément individuel utilisera le style de la propriété align-self et centrera l'élément sur le conteneur parent.

Affichez le code de la propriété align-self dans ce Extrait CodePen pour voir quelques exemples.

Comment répartir les lignes sur l'axe transversal

Le aligner le contenu La propriété aligne les enfants le long de l'axe vertical. Il peut également déterminer l'espacement entre les éléments qui se trouvent sur plusieurs lignes.

Les options de la propriété align-content incluent :

align-content: flex-start | extrémité flexible | centre | étirer | espace-entre | espace autour

Ajoutez la propriété align-content au conteneur flex parent. La propriété align-content ne fonctionnera que si la propriété flex-wrap est définie. Ajoutez flex-wrap: enveloppez le conteneur parent et réduisez la largeur de la div parent pour forcer les éléments sur plusieurs lignes.

.parent {
 flex-wrap: enveloppe ;
 affichage: flexible ;
 align-content: flex-start ;
 largeur: 180 pixels ;
}

Affichez le code de la propriété align-content dans ce Extrait CodePen pour voir quelques exemples.

Comment aligner les éléments sur l'axe principal

Le justifier-contenu La propriété ajoute un alignement à droite, à gauche ou centré aux éléments enfants. Il répartit également les éléments en ajoutant des espaces entre eux lors de la justification du contenu.

Les options pour la propriété justifier-content incluent :

justifier-contenu: flex-start | extrémité flexible | centre | espace-entre | espace-autour | espacer uniformément

Enveloppez les éléments que vous souhaitez aligner sous un conteneur flexible parent.

HTML :

CSS :

.red { couleur de fond: rouge; }
.green { background-color: vert clair; }
.blue { background-color: bleu; }

Ajoutez la propriété justifier-content au conteneur flex parent.

.parent {
 largeur: 300 pixels ;
 affichage: flexible; 
 justifier-contenu: flex-start ;
}

La propriété justifier-content prend également en charge les valeurs répertoriées dans la spécification CSS Box Alignment. Cela inclut des valeurs telles que "début", "fin", "gauche" et "droite". Certains navigateurs ne les prennent pas en charge.

La propriété justifier-content a également un mot-clé "sûr" que vous pouvez utiliser. Cela garantit que les éléments essaient de rester dans la plage du conteneur parent.

Il est également utilisé pour éviter la perte de données, dans le cas où vous centrez un mot long. L'utilisation du mot-clé safe empêche une div plus courte de couper les première et dernière lettres.

.parent {
 affichage: flexible; 
 justifier-contenu: centre sécurisé ;
}

Le mot-clé safe est également limité à certains navigateurs. Vous pouvez vérifier la compatibilité sur Puis-je utiliser.

Affichez le code de la propriété justifier-content dans ce Extrait CodePen pour voir quelques exemples.

Comment ajouter un espacement entre les éléments

Le écart La propriété vous permet d'ajouter une quantité d'espace entre les éléments. C'est l'un des nouvelles fonctionnalités CSS qui peuvent vous aider à créer une mise en page réactive.

Appliquez la propriété gap au conteneur flexible parent.

.parent {
 affichage: flexible ;
 espace: 70px ;
}

Si vous ajoutez un espace qui force la longueur des éléments à dépasser la largeur du parent, les éléments se rétréciront pour essayer de tenir à l'intérieur de la ligne.

.parent { 
 largeur: 300 pixels ;
 espace: 120px ;
}

Si vous utilisez flex-wrap: wrap pour pousser les éléments vers une nouvelle ligne, le montant de l'écart s'appliquera également à l'espace entre les lignes.

.parent { 
 largeur: 300 pixels ;
 flex-wrap: enveloppe ;
 espace: 120px ;
}

De plus, vous pouvez également définir le interligne et écart de colonne Propriétés. Encore une fois, vous devrez les appliquer au conteneur flexible parent.

La propriété row-gap détermine l'espace entre chaque ligne. La propriété column-gap détermine l'espace entre chaque colonne.

.parent { 
 espacement des lignes: 120px; 
}
.parent { 
 écart de colonne: 120 px; 
}

Affichez le code de la propriété gap dans ce Extrait CodePen pour voir quelques exemples.

Utiliser plus de propriétés Flex sur votre site Web

J'espère que vous êtes maintenant familiarisé avec les différentes propriétés flexibles que vous pouvez utiliser pour aligner les éléments sur votre page Web. Cela inclut la façon dont vous pouvez utiliser les propriétés flex-direction, justifier-content, align-self, align-items, align-content et gap.

Flexbox est une technique de mise en page puissante, mais ce n'est qu'une petite partie du CSS. Vous pouvez également en savoir plus sur les nouvelles propriétés CSS, les techniques de codage propres et les outils utilisés pour l'optimisation CSS.

11 outils utiles pour vérifier, nettoyer et optimiser les fichiers CSS

Lire la suite

A propos de l'auteur