Conférence 14 : Flexbox – La manière moderne d'aligner et de distribuer l'espace

Salut! Prêt à plonger dans l’un des outils CSS les plus cool et les plus puissants ? Aujourd'hui, nous allons explorer Flexbox. Si vous avez déjà eu du mal à aligner des éléments ou à répartir l'espace de manière soignée et réactive, Flexbox est votre nouveau meilleur ami.

1. Qu'est-ce que Flexbox ?

Flexbox (Flexible Box Layout) est un système de mise en page unidimensionnel qui vous permet de contrôler l'alignement, l'espacement et la distribution des éléments à l'intérieur d'un conteneur, même lorsque la taille de ces éléments est inconnue ou dynamique.

Considérez Flexbox comme une boîte à outils pour créer des mises en page qui peuvent s'étirer, se réduire ou s'aligner en fonction de l'espace disponible.

2. La magie commence avec l'affichage : flex

Pour commencer à utiliser Flexbox, il vous suffit de définir display: flex sur un conteneur. Une fois que vous faites cela, tous les enfants directs de ce conteneur deviennent des éléments flexibles, et ils commenceront immédiatement à se comporter différemment.

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

Désormais, tous les éléments à l'intérieur de .flex-container sont des éléments flexibles et peuvent être facilement manipulés.

3. Direction flexible – Quelle direction devons-nous prendre ?

Par défaut, Flexbox organise les éléments dans une ligne (horizontalement), mais que se passe-t-il si vous les souhaitez dans une colonne (verticalement) ? Flexbox vous donne un contrôle total avec la propriété flex-direction.

• ligne : aligner les éléments sur une ligne horizontale (c'est la valeur par défaut).
• colonne : empilez les éléments dans une colonne verticale.
• row-reverse : identique à la ligne, mais l'ordre des éléments est inversé.
• column-reverse : identique à la colonne, mais les éléments sont empilés dans l'ordre inverse.

.flex-container {
    display: flex;
    flex-direction: column;
}

Maintenant, les éléments s'empileront verticalement !

4. Justifier le contenu – Répandre les choses

Disons que vous avez trois éléments et que vous souhaitez les répartir uniformément dans votre conteneur. C'est là que justify-content s'avère utile.

• flex-start : les éléments s'alignent sur le début du conteneur (par défaut).
• center : les éléments sont centrés.
• espace entre : les éléments sont régulièrement espacés, le premier élément étant au début et le dernier à la fin.
• espace autour : les éléments sont espacés avec un remplissage égal autour de chaque élément.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Désormais, les éléments seront uniformément espacés dans le conteneur.

5. Alignement des éléments – Magie verticale

Alors que justification-content contrôle l'alignement horizontal, align-items s'occupe de l'alignement vertical (ou le long de l'axe transversal). Voici vos options :

• stretch : les éléments s'étirent pour remplir le conteneur (par défaut).
• flex-start : les éléments sont alignés vers le haut.
• flex-end : les éléments sont alignés vers le bas.
• center : les éléments sont centrés verticalement.

.flex-container {
    display: flex;
    align-items: center;
}

Désormais, tous les éléments seront centrés verticalement dans le conteneur.

6. Flex-Grow, Flex-Shrink et Flex-Basis – Affiner les éléments Flex

Parfois, vous souhaitez que certains éléments s'agrandissent, diminuent ou aient une taille de départ fixe. Les propriétés flex-grow, flex-shrink et flex-basis vous permettent de contrôler ce comportement :

• flex-grow : contrôle la croissance d'un élément par rapport aux autres éléments.
• flex-shrink : contrôle le degré de réduction d'un élément par rapport aux autres éléments.
• flex-basis : définit la taille initiale de l'élément avant qu'il ne s'agrandisse ou ne rétrécisse.

Exemple:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Cela garantit que l'élément commence à 100 px, mais il peut s'agrandir pour remplir un espace supplémentaire si nécessaire, sans rétrécir.

7. Exemple de Flexbox en action

Rassemblons tout cela avec un exemple !

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

Dans cet exemple :

• Les éléments sont disposés dans une rangée.
• Ils sont uniformément espacés avec le contenu justifié : espace-autour.
• Tous les éléments sont centrés verticalement dans le conteneur avec align-items: center.
• Chaque élément grandit pour remplir l'espace disponible de manière égale, grâce à flex-grow : 1.

8. Pourquoi Flexbox est génial

Flexbox élimine une grande partie de la complexité de la conception de mise en page avec laquelle nous avions l'habitude de lutter en CSS. Plus de flotteurs, plus de soucis de nettoyage et un design réactif beaucoup plus simple !

Points clés à retenir :

• Utilisez display: flex pour transformer un conteneur en conteneur flexible.
• Utilisez flex-direction pour définir la direction du flux (ligne ou colonne).
• Utilisez justify-content et align-items pour contrôler l'espacement et l'alignement.
• Affinez vos éléments flexibles avec flex-grow, flex-shrink et flex-basis.

suivez-moi sur LinkedIn-

Ridoy Hasan