Flexbox

1 h Niveau 10

Le module Flexbox Layout (boîte flexible) (une recommandation candidate du W3C en octobre 2017) vise à fournir un moyen plus efficace de disposer, d'aligner et de répartir l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue et/ou dynamique (d'où le mot "flex").

L'idée principale de la mise en page flexible est de donner au conteneur la possibilité de modifier la largeur/hauteur (et l'ordre) de ses éléments pour remplir au mieux l'espace disponible (principalement pour s'adapter à tous les types de dispositifs d'affichage et de tailles d'écran). Un conteneur flexible étend les éléments pour remplir l'espace libre disponible ou les rétrécit pour éviter tout débordement.

Container / Items

Le Flexbox est relativement simple à comprendre, si l'on pose correctement les bases. Un élément devient un container (conteneur en français) à partir du moment où sa propriété displayprend pour valeur flex. Dans le même temps, l'ensemble des éléments HTML étant des enfants directs du container sont considérés comme des items (éléments en français).

D'après l'exemple suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item div1">
            <p>Ma phrase 1</p>
        </div>
        <div class="item div2">
            <p>Ma phrase 2</p>
        </div>
        <div class="item div3">
            <div class="normal sousdiv1">
                <p>Ma phrase 3</p>
            </div>
            <div class="normal sousdiv2">
                <p>Ma phrase 4</p>
            </div>
        </div>
        <div class="item div4">
            <p>Ma phrase 4</p>
        </div>
    </div>
</body>
</html>

Quelques explications sur le code ci-dessus :

un display: flexest appliqué en CSS à la classe .container.
la <div class="container"> est donc devenue un container flex. C'est la seule <div> du code à en être un.
les <div> 1, 2, 3 & 4 sont des enfants directs du container, ils sont donc devenus des items flex.
les <div class="normal sousdiv1"> et <div class="normal sousdiv2"> sont des divs normales : elles ne sont ni des container, ni des items.

Il est primordial de bien faire le distinguo entre les containers et les items. Certaines propriétés devront s'appliquer sur les containers, tandis que d'autres devront s'appliquer sur les items. Dans les deux cas de figure, les effets de positionnement seront produits sur les items, et non sur les containers !

Il est important de noter que la majorité des effets applicables sur les containers sont suffisant pour positionner l'ensemble des items, y compris pour la gestion du resonsive. De la sorte, il est important de réaliser les positionnements d'abords en jouant avec les containers, avant d'influer sur les items en dernier recours.

remarque : Un item est un enfant direct d'un container, mais il peut cumuler les deux statuts et devenir lui-même un container (en plus d'un item) si la propriété display: flex; lui est appliqée.

Propriétés des containers

flex-direction

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !