Disposition Flexbox : Comment distribuer les éléments enfants de manière égale

Flexbox est un puissant module de mise en page en CSS qui vous aide à utiliser efficacement l'espace disponible à l'intérieur d'un conteneur. Dans ce tutoriel, vous apprendrez comment répartir de manière égale les éléments enfants dans un conteneur Flex. Cela est particulièrement utile pour les designs responsifs, où la largeur de la fenêtre peut varier. Allons-y!

Principales conclusions

• Avec Flexbox, vous pouvez répartir de manière égale les éléments enfants dans la mise en page en ajustant les valeurs flex des éléments.
• Vous pouvez rendre la largeur et la hauteur des éléments enfants flexibles pour qu'ils s'adaptent automatiquement à l'espace disponible, sans avoir à utiliser de dimensions fixes.

Guide étape par étape

Pour comprendre comment répartir de manière égale les éléments enfants dans un conteneur Flex, suivez ces étapes:

Commencez par créer un conteneur Flex en appliquant la propriété CSS display: flex;. Voici un exemple simple de la manière de procéder. Assurez-vous que le conteneur est aligné au format de ligne (row):

Dans cet état, l'espace est réparti uniformément entre tous les éléments enfants, tant que ces éléments enfants n'ont pas de largeurs fixes. Si vous définissez la largeur des éléments enfants et que vous la fixez à 100 pixels, ils seront répartis de manière égale dans le conteneur, mais ce n'est pas optimal pour un design responsif:

En supprimant les largeurs fixes, vous verrez rapidement que l'espace est considérablement réduit, surtout lorsque le texte est absent des éléments enfants. Dans ce cas, tout se replie sur la largeur minimale définie par le texte:

Pour répartir l'espace disponible de manière égale, vous devez définir la valeur flex pour les éléments enfants. Cela se fait facilement en appliquant la propriété flex, qui vous permet de définir une part proportionnelle de l'espace disponible. Définissez la valeur flex de chaque élément enfant sur 1:

Une fois que vous avez fait cela, vous verrez que tous les éléments enfants ont réparti l'espace de manière égale. Il s'agit d'une solution très flexible, car elle s'adapte dynamiquement à la largeur du conteneur:

Vous pouvez également varier les valeurs flex pour créer des proportions différentes. Par exemple, si le premier élément doit occuper la moitié de l'espace, vous pouvez le définir sur flex: 2;, tandis que les autres éléments maintiennent flex: 1;:

Après avoir ajusté les valeurs, les éléments enfants seront distribués en fonction des valeurs définies. Avec les parts flexibles que vous avez assignées, le premier élément aura plus d'espace que les autres:

En modifiant la largeur du conteneur, les proportions restent stables. Que vous régliez la largeur sur 800 pixels ou 400 pixels, les éléments enfants s'adaptent automatiquement et répartissent l'espace de manière égale en fonction des valeurs flex définies précédemment:

Vous pouvez facilement ajuster les propriétés Flexbox en modifiant la propriété flex-direction. Par exemple, si vous passez le conteneur Flex de ligne à colonne, la logique de la répartition reste la même. Les éléments enfants seront alors disposés verticalement:

Assurez-vous que la hauteur des éléments enfants n'est pas fixée pour conserver la flexibilité. Cela fonctionne particulièrement bien pour les designs responsifs, car les éléments enfants s'adaptent en fonction de la taille et de l'orientation de l'écran:

De cette manière, vous pouvez créer une mise en page fortement responsive, garantissant que votre design soit excellent à la fois sur un bureau et sur une vue mobile.

Résumé

Dans ce tutoriel, vous avez appris comment utiliser Flexbox en CSS et HTML pour distribuer uniformément les éléments enfants. Grâce aux propriétés Flex, vous pouvez créer des mises en page réactives qui s'adaptent parfaitement à différentes tailles et formats d'écran.