FlexBox – Exemples Pratiques

FlexBox nous fournit des solutions simples pour certains des problèmes les plus anciens qu’a connu la conception web.

Centrage vertical et horizontal

Le centrage vertical a été l’une des solutions CSS les plus recherchées depuis très longtemps. Avec FlexBox, le centrage d’un élément à l’intérieur de son conteneur est devenu aussi simple que n’importe quel débuteur peut le faire sans se plaindre. Commencez par créer un conteneur flex:

.container {
    display: flex;
}

Ensuite, en utilisant la propriété justify-content (voir cette section içi), vous centrez l’élément sur l’axe-principal main-axis (horizontalement) et, en utilisant la propriété aligner-éléments align-items (voir cette section içi), vous centrez l’élément verticalement.

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

Et c’est tout! Peu importe la taille de l’élément, il sera toujours centré dans son conteneur. Voici une démonstration en direct de l’exemple de code ci-dessus.

Disposition multi-colonnes à hauteur égale

L’une des nombreuses choses que nous essayons habituellement d’accomplir pour nos conceptions, mais qui n’ont aucun moyen direct en CSS de le faire, c’est de créer une disposition multi-colonne (par exemple, deux colonnes ou trois colonnes) où toutes les colonnes ont la même hauteur peu Importe combien de contenu contient chacune des colennes. Ceci est typique dans les mises en page de blog à deux colonnes ou les mises en page de magazines à plusieurs colonnes.

une fois encore FlexBox est là pour nous sauver du petrin 🙂 !  En utilisant Flexbox, créer des colonnes égales est aussi simple que 1 2 3.

Nous utiliserons un balisage très simple pour un simple blog:

<header><!-- header stuff --></header>
<div class="container">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer><!-- footer stuff --></footer>

Nous voulons nous assurer que la barre latérale sidebar a la même hauteur que la section principale main section, Quelle que soit la quantité de contenu dans chacune d’elles. Auparavant, nous avions l’habitude de recourir aux techniques comme celles des fausses colonnes entre autres. De nos jours, et Grace a FlexBox nous pouvons atteindre des hauteurs égales comme cela:

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

Ensuite, vous pouvez définir les largeurs et les facteurs de croissance/rétrécissement grow-flex/shrink-flex  à l’aide de la propriété Flex, quelle que soit la valeur souhaitée.
Voici une démonstration en direct montrant les colonnes à hauteur égale en action. La largeur des deux colonnes est définie à l’aide de la propriété de base-flexible flex-basis dans le cadre du raccourcie flex, ainsi que du facteur de croissance-flexible flex grow.

En utilisant media queries (requêtes multimédias), vous pouvez modifier la disposition des deux colonnes et les faire empiler l’une sur l’autre sur des écrans plus petits, en utilisant la propriété flex-direction (voir cette section içi).

@media screen and (max-width:500px) {
    .container {
        flex-direction: column;
    }
}

Comme mentionné précédemment, vous pouvez réorganiser la façon dont les éléments apparaissent également à l’aide de la propriété order (voir cette section içi). Ainsi, si vous avez trois colonnes, par exemple, et une de ces colonnes contient des publicités, et vous souhaitez que ces annonces apparaissent en haut ou en bas sur des petits écrans, ou même quelque part entre les deux, vous pouvez contrôler l’ordre d’apparition une fois Les colonnes sont empilées l’une sur l’autre sur des écrans plus petits.

Sticky Footer (Pied de Page Gluant)

Avoir le pied de la page (footer) tout au bas de la page, même si le contenu de la page au-dessus du pied de page est plus petit que la fenêtre, est quelque chose que presque chacun de nous a dû expérimenter à un certain moment. Il y a eu plusieurs techniques sur le Web durant un certain temps qui vous permettent de faire cela, mais tous dépendent de la hauteur du pied de page; Sans connaître la hauteur du pied de page, ces techniques ne fonctionneraient jamais.

FlexBox nous permet de coller le pied de page tout au bas de la page  facilement. Vous commencez par poser les éléments flexibles verticalement à l’aide de flex-direction (voir cette section içi). Après, vous avez la section de contenu principale à élargir/croître à l’aide de flex-grow (voir cette section içi), poussant ainsi le pied de page vers le bas de la page. Cependant, la page devrait avoir une hauteur égale à la hauteur de la fenêtre, ou plus.

<body>
    <header><!-- header stuff --></header>
    <section class="content"><!-- main content --></section>
    <footer><!-- footer stuff --></footer>
</body>

CSS est simple:

body {
    display: flex;
    /* make sure it's at least as tall as the viewport */
    min-height: 100vh;
    /* lay items out vertically */
    flex-direction: column;
}
section.content {
    flex-grow: 1;
}

Voici une démonstration en direct montrant le code ci-dessus en action:

Navigation flexible

Une autre façon dont FlexBox nous aide, c’est de la mise en page des éléments de navigation. Avant FlexBox, nous disposions les éléments à l’aide de inline (en ligne), inline-block (bloc en ligne) ou block displays (Afficher les blocs) ou en flottant les éléments les uns à côté des autres. Ainsi, si la navigation prend l’espace horizontal entier, et les éléments ne sont pas assez larges (en texte) pour remplir cet espace, ils seront vidés à droite ou à gauche, avec beaucoup d’espace sur l’autre côté. Si vous devriez lez répandre pour remplir l’espace, vous devriez configurer des largeurs spécifiées, et effectuer les calculs nécessaires pour cela, puis ajouter le remplissage et les marges possibles pour espacer les éléments en dehors.

Comme vous l’avez deviné, FlexBox rend la distribution des éléments de navigation beaucoup plus simple. En utilisant justify-content (voir cette section içi), vous pouvez répartir les éléments avec de l’espace entre eux.

ul.navigation {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

De plus, vous pouvez  transformer une navigation horizontale en une navigation verticale aussi simplement. avec les éléments empilés les uns sur les autres sur les petits écrans.

@media screen and (max-width: 430px) {
    .navigation {
        flex-direction: column;
        /* other general styles if needed */
    }
}

Voici une démo en direct du code ci-dessus.

Compatibilité

FlexBox est pris en charge par les versions suivantes:

Notes

Au fil du temps, la syntaxe de FlexBox a changé. Si vous naviguez sur le Web pour les articles FlexBox, vous pouvez rencontrer des articles qui utilisent une syntaxe différente de celle utilisée dans cette entrée. Certains articles peuvent encore utiliser l’ancienne syntaxe. La syntaxe utilisée dans cette entrée est la Nouvelle / dernière syntaxe.

Comme vous pouvez le voir dans le tableau de compatibilité des navigateurs, certaines anciennes versions de navigateurs sont utilisées pour prendre en charge l’ancienne syntaxe. Selon le nombre de versions de navigateur que vous souhaitez supporter, vous devrez peut-être utiliser l’ancienne et la nouvelle syntaxe FlexBox.