Flexbox – La manière moderne d'aligner et de distribuer l'espace

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 disposition 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étrécir ou s'aligner en fonction de l'espace disponible.

2. La magie commence par 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.

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.flex-container {
    display: flex;
}

Maintenant, 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 devrions-nous prendre ?

Par défaut, Flexbox organise les éléments dans une rangée (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 : alignez 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 objets s'empileront verticalement !

4. Justifier le contenu – Répandre les choses

Disons que vous avez trois articles et que vous souhaitez les répartir uniformément dans votre conteneur. C'est là que justify-content entre en jeu.

• flex-start : les éléments s'alignent sur le début du conteneur (par défaut).
• centre : 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 élément à 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;
}

Maintenant, les articles seront uniformément espacés dans le conteneur.

5. Alignement d'é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 :

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

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

Maintenant, 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 grandissent, rétrécissent 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étrécissement 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 grandisse 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 Flexbox en action

Rassemblons tout cela avec un exemple !

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.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 articles sont disposés en 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 du mal 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 flex.
• 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

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!