Le guide ultime de Flexbox - Apprendre à travers des exemples

Quelle est la meilleure façon de comprendre Flexbox ? Apprenez les principes de base, puis construisez beaucoup de choses Et c'est exactement ce que nous allons faire dans cet article.

Quelques points à noter

  • Cet article a été rédigé en pensant aux développeurs intermédiaires et suppose que vous en savez déjà un peu sur Flexbox. Mais…
  • Si vous connaissez un peu de CSS, mais que vous ne connaissez pas du tout Flexbox, j'ai écrit un guide complet ici (article gratuit, lecture de 46 minutes).
  • Et si vous ne connaissez pas très bien le CSS, je vous recommande de suivre mon introduction complète (pratique) au CSS (cours payant de 74 leçons).
  • Vous n'êtes pas obligé de suivre les exemples de cet article dans l'ordre indiqué ici.
  • Flexbox n'est qu'une technique de mise en page. Les projets du monde réel nécessitent plus que des mises en page.
  • Lorsque vous voyez une notation telle div.ohansqu'elle fait référence à un div avec un nom de classe deohans

Exemple 1: Comment créer une galerie de photos avec Flexbox

Faire des photos en lignes et en colonnes avec Flexbox est plus facile que la plupart des gens ne le pensent.

Considérez un balisage simple, comme ceci:

Nous avons 10 images dans un fichier main.gallery.

Supposons que le main.gallerystyle a été conçu pour couvrir l'écran disponible.

.gallery { min-height: 100vh}

Une note rapide sur les images

Par défaut, les images sont des inline-blockéléments. Ils ont une largeur et une hauteur. Ils resteront sur une ligne sauf lorsqu'ils sont contraints par leur taille, comme les images étant trop grandes pour tenir sur une ligne.

Le point de départ

En mettant tout ensemble, le résultat de tout le balisage et du style ci-dessus est le suivant:

Maintenant, mettez Flexbox sur scène:

.gallery { display: flex }

À ce stade, le comportement par défaut des images a changé. Ils vont d'être des inline-blockéléments à êtreflex-items.

En raison du contexte Flexbox initié à l'intérieur .gallery, les images seront maintenant écrasées sur une seule ligne. De plus, ils s'étireraient le long de la verticale comme ceci:

Ceci est le résultat du comportement par défaut de Flexbox:

  1. Écrasez tous les éléments enfants sur une seule ligne. N'emballez pas les éléments.

C'est mauvais pour une galerie, nous changeons donc ce comportement comme ceci:

.gallery { flex-wrap: wrap}

Cela va maintenant envelopper les éléments et les diviser en plusieurs lignes le cas échéant.

2. Les images passent maintenant à la ligne suivante. Mais ils s'étirent toujours le long de la verticale. Nous ne voulons certainement pas de ce comportement car il déforme les images.

Le stretchcomportement est dû à la align-itemsvaleur par défaut sur les flexconteneurs.

align-items: stretch

Changeons cela:

.gallery { ... align-items: flex-start}

Cela empêchera les images de s'étirer. Ils prendront leur valeur par défaut widthet leurs height valeurs.

Ils s'aligneront également sur le début de l'axe vertical comme indiqué ci-dessous:

Nous avons maintenant notre galerie alimentée par Flexbox.

L'avantage d'utiliser Flexbox

À ce stade, il n'y a pas beaucoup d'avantages à utiliser Flexbox. Nous avons le même look que nous avions avant de lancer le modèle Flexbox .

Outre l'obtention d'une galerie réactive gratuite, les autres avantages de l'utilisation de Flexbox viennent des options d'alignement qu'elle apporte.

N'oubliez pas que le conteneur flex .gallerysuppose les valeurs de propriété suivantes. flex-direction: rowjustify-content: flex-startetalign-items: flex-start.

La disposition de la galerie peut être changée en un instant en jouant avec les valeurs par défaut comme indiqué ci-dessous:

.gallery { ... justify-content:center;}

Comme le montre l'image ci-dessus, cela alignera les images au centre, le long de l'horizontale:

.gallery { ... justify-content:center; align-items: center;}

Comme le montre l'image ci-dessus, cela aligne les images à la fois horizontalement et verticalement au centre de .gallery

Flexbox propose de nombreuses options d'alignement. N'hésitez pas à jouer avec d'autres options d'alignement à votre guise.

Vous pouvez voir la galerie Flexbox réelle dans ce CodePen.

Exemple 2: Comment créer des cartes avec Flexbox

Les cartes sont devenues populaires sur Internet. Google, Twitter, Pinterest, et il semble que tout le monde passe aux cartes.

Une carte est un modèle de conception d'interface utilisateur qui regroupe les informations associées dans un conteneur de taille flexible. Cela ressemble visuellement à une carte à jouer.

Il existe de nombreuses bonnes utilisations des cartes. La tristement célèbre grille de tarification est la plus courante.

Construisons-en un.

Le balisage

Chaque carte assumera un balisage comme ci-dessous:

    Il y aura au moins 3 cartes. Enveloppez les cartes dans undiv.cards

    Maintenant, nous avons un élément parent.

    Pour cet exemple, l'élément parent a été configuré pour remplir toute la fenêtre.

    .cards { min-height: 100vh}

    Configurer Flexbox

    Le bloc de code suivant lancera un contexte de formatage Flexbox dans .cards

    .cards { display: flex; flex-wrap: wrap}

    Si vous vous souvenez du dernier exemple, flex-wrappermettra à la flex-itemsde passer sur une autre ligne.

    Cela se produit lorsque les éléments enfants ne peuvent pas entrer dans l'élément parent. Cela est dû à la plus grande taille de largeur calculée des éléments enfants combinés.

    Allez-y et donnez .cardune largeur initiale.

    Utilisation de Flexbox:

    .card { flex: 0 0 250px}

    Cela définira les valeurs flex-growet flex-shrinksur 0. La flex-basisvaleur sera définie sur250px

    À ce stade, les cartes seront alignées sur le début de la page. Ils s'étireront également le long de la verticale.

    Dans certains cas, cela peut être idéal pour votre cas d'utilisation. Mais dans la plupart des cas, ce ne sera pas le cas.

    Le comportement par défaut des conteneurs Flex

    Le résultat ci-dessus est dû au comportement par défaut des conteneurs flex.

    Les cartes commencent au début de la page sur le top leftcar justify-contentest défini sur la valeur flex-start.

    En outre, les cartes s'étirent pour remplir toute la hauteur de l'élément parent car elle align-itemsest définie sur stretchpar défaut.

    Modifier les valeurs par défaut

    Nous pouvons obtenir des résultats assez impressionnants en modifiant les valeurs par défaut proposées par Flexbox.

    Voir ci-dessous:

    Pour afficher le projet final, consultez ce CodePen.

    Exemple 3: Comment créer des grilles avec Flexbox

    Des frameworks CSS entiers sont construits sur le concept à discuter dans cet exemple. Ce sont des choses assez importantes.

    Qu'est-ce qu'une grille?

    Une grille est une série de lignes de guidage verticales et horizontales droites qui se croisent utilisées pour structurer le contenu.

    Si vous êtes familier avec les frameworks CSS tels que Bootstrap, vous avez certainement déjà utilisé des grilles.

    Votre kilométrage peut différer, mais nous considérerons différents types de réseau dans cet exemple.

    Commençons par le premier,grilles de base .

    Grilles de base

    Ce sont des grilles avec les caractéristiques suivantes:

    • Les cellules de la grille doivent être espacées de manière égale et s'étendre pour s'adapter à toute la ligne.
    • Les cellules de la grille doivent être de hauteur égale.

    C'est facile à réaliser avec Flexbox. Considérez le balisage ci-dessous:

     1 

    Chacun .rowsera son propre conteneur flexible.

    Chaque élément à l'intérieur .rowdevient alors un élément flexible. Tous les éléments flexibles sont répartis uniformément sur la ligne.

    De par sa conception, peu importe que nous ayons 3 éléments enfants

     1/3 1/3 1/3 

    Ou 6 éléments enfants

     1/6 1/6 1/6 1/6 1/6 1/6 

    Ou 12 éléments

     1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 

    La solution

    Il n'y a que deux étapes pour y parvenir.

    1. Lancer un contexte de formatage Flexbox:
    .row { display: flex;}

    2. Faites flex-itemen sorte que chaque agrandissement s'adapte à la ligne entière dans des proportions égales:

    .row_cell { flex: 1}

    Et c'est tout.

    La solution expliquée.

    flex: 1

    flexest un nom de propriété de raccourci pour définir trois propriétés distinctes, ēno les flex-grow, flex-shrinket les flex-basispropriétés, dans l'ordre indiqué.

    flex: 1a seulement la valeur 1définie. Cette valeur est attribuée à la flex-grow propriété.

    Les propriétés flex-shrinket flex-basisseront définies sur 1et 0.

    flex: 1 === flex: 1 1 0

    Cellules de grille avec des tailles spécifiques

    Parfois, ce que vous voulez n'est pas une ligne de grille de cellules égales.

    Vous voudrez peut-être des cellules qui sont le double des autres cellules, ou n'importe quelle fraction d'ailleurs.

    La solution est assez simple.

    À ces cellules de grille spécifiques, ajoutez une classe de modificateurs comme ceci:

    .row_cell--2 { flex: 2}

    Faites inclure la classe dans le balisage. Voir le premier enfant divdans le balisage ci-dessous:

     2x 1/3 1/3 

    La cellule avec la classe .row__cell--2sera 2 fois les cellules par défaut.

    Pour une cellule qui occupe 3 fois l'espace disponible:

    .row_cell--3 {

    flex: 3

    }

    Cellules de grille avec des alignements spécifiques

    Grâce à Flexbox, chaque cellule n'a pas à être liée à une certaine valeur d'alignement. Vous pouvez spécifier l'alignement spécifique pour n'importe quelle cellule.

    Pour ce faire, utilisez des classes de modificateurs comme celle-ci:

    .row_cell--top { align-self: flex-start}

    Cela alignera la cellule spécifique sur le haut du fichier row.

    Vous devez également avoir ajouté la classe à la cellule spécifique dans le balisage. Voir le premier enfant divdans le balisage ci-dessous:

    Voici les autres options d'alignement disponibles:

    .row_cell--bottom { align-self: flex-end}
    .row_cell--center { align-self: center}

    Alignement global dans les rangées

    Comme des cellules spécifiques peuvent être alignées, les éléments enfants entiers dans la ligne le peuvent également .

    Pour ce faire, utilisez une classe de modificateurs comme ceci:

    .row--top { align-items: flex-start}

    Il est important de noter que la classe des modificateurs .row--topdoit être ajoutée au rowou au parentflex-container

    Les autres options d'alignement peuvent être vues ci-dessous:

    .row--center { align-items: center}
    .row--bottom { align-items: flex-end}

    Grilles imbriquées

    Sans rien faire de particulier, ceux-ci rowspeuvent être imbriqués en eux-mêmes.

    Vous pouvez voir les grilles finales créées ici.

    Encore plus de grilles

    Bien que vous puissiez obtenir des grilles de construction sophistiquées avec des grilles verticales Flexbox et des configurations encore plus complexes, utilisez le meilleur outil pour le travail. Apprenez, maîtrisez et utilisez la disposition de grille CSS. C'est la solution CSS ultime pour les grilles.

    Exemple 4: Comment créer des mises en page de site Web avec Flexbox

    La communauté désapprouve généralement l'utilisation de Flexbox pour des mises en page Web complètes.

    Bien que je sois d'accord avec cela, je pense aussi que dans certains cas, vous pouvez vous en tirer.

    Le conseil le plus important que je puisse donner ici serait:

    Utilisez Flexbox là où cela a du sens

    Je vais expliquer cette déclaration dans l'exemple suivant.

    La disposition du Saint Graal

    Quelle meilleure mise en page de site Web que le tristement célèbre « Saint Graal »?

    Il existe 2 façons d'essayer de créer cette mise en page avec Flexbox.

    La première consiste à créer la mise en page avec Flexbox. Placez le header, footer, nav, articleet asidetout en un flex-container.

    Commençons par ça.

    Le balisage

    Considérez le balisage de base ci-dessous:

     Header  Article Nav Aside  Footer

    Entre autres, il y a une règle particulière à laquelle adhère le Saint Graal. Cette règle a inspiré le balisage ci-dessus:

    La colonne centrale articledoit apparaître en premier dans le balisage, avant les deux barres latérales navet aside.

    Lancer le contexte de formatage Flexbox

    body { display: flex}

    Étant donné que les éléments enfants doivent s'empiler de haut en bas, la direction par défaut de la Flexbox doit être modifiée.

    body { ... flex-direction: column}

    1 . headeret footerdevrait avoir une largeur fixe.

    header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

    2.main doit être fait pour remplir l'espace restant disponible dans leflex-container

    main { flex: 1}

    En supposant que vous n'avez pas oublié, flex: 1est équivalent à flex-grow: 1, flex-shrink: 1etflex-basis: 0

    À ce stade, nous devons prendre soin du contenu dans mainlequel sont article, navet aside.

    Configurer en maintant que flex-container:

    main { display: flex}

    Avoir le navet asideprendre des largeurs fixes:

    nav,aside { width: 20vw}

    Assurez-vous que cela articleoccupe l'espace disponible restant:

    article { flex: 1}

    Il n'y a plus qu'une chose à faire maintenant.

    Réorganisez le flex-itemsdonc navs'affiche en premier:

    nav { order: -1}

    La orderpropriété est utilisée pour réorganiser la position de flex-items.

    Tout flex-itemsdans un conteneur sera affiché dans desorder valeurs croissantes . Les flex-itemavec les ordervaleurs les plus faibles apparaissent en premier.

    Tous flex-itemsont une ordervaleur par défaut de 0.

    La mise en page du Saint Graal (une autre solution)

    La solution précédente utilisait a flex-containercomme conteneur global. La mise en page dépend fortement de Flexbox.

    Voyons une approche plus «saine». Jetez à nouveau un coup d'œil au résultat final supposé:

    headeret footerpourraient être traités comme des éléments de bloc. Sans aucune intervention, ils rempliront la largeur de leur élément contenant et s'empileront de haut en bas.

     Header  Article Nav Aside  Footer

    Avec cette approche, le seul flex-containerbesoin serait main.

    Le défi singulier de cette approche est que vous devez calculer la hauteur de mainvous - même. maindoit remplir l'espace disponible en plus de l'espace occupé par le headeretfooter.

    main { height: calc(100vh - 40vh);}

    Considérez le bloc de code ci-dessus. Il utilise la calcfonction CSS pour calculer la hauteur demain.

    Quel que soit votre kilométrage, la hauteur de maindoit être égale àcalc(100vh — height of header — height of footer ).

    Comme dans la solution précédente, vous devez avoir donné headeret footerune hauteur fixe. Continuez ensuite et traitez de mainla même manière que dans la solution précédente.

    Vous pouvez voir les résultats réels ici.

    Mises en page de site Web à 2 colonnes

    Les dispositions de deux colonnes sont assez courantes. Ils sont également faciles à réaliser avec Flexbox.

    Considérez le balisage ci-dessous:

     sidebar main

    Lancez le contexte de formatage Flexbox:

    body { display: flex;}

    Donnez asideune largeur fixe:

    aside { width: 20vw}

    Enfin, assurez-vous que mainremplit l'espace disponible restant:

    main { flex: 1}

    C'est à peu près tout ce qu'il y a à faire.

    Exemple 5: Objets média avec Flexbox

    Les objets multimédias sont partout. Des tweets aux publications Facebook, ils semblent être le choix par excellence pour la plupart des conceptions d'interface utilisateur.

    Considérez le balisage ci-dessous:

    Header

    Comme vous l'avez deviné, .mediaétablira le contexte de mise en forme Flexbox:

    .media { display: flex}

    Par défaut, les flex-itemsde a containersont étirés le long de la verticale pour remplir la hauteur disponible dans le flex-container.

    Assurez-vous que le .media-bodyprend tout l'espace disponible restant:

    .media-body { flex: 1}

    Réparons la boîte étirée.

    .media { ... align-items: flex-start}

    Et c'est tout.

    Un objet multimédia retourné

    Vous n'avez pas la possibilité de modifier l' htmlordre source pour créer un objet multimédia inversé.

    Réorganisez simplement les flex-items comme ceci:

    .media-object { order: 1}

    L'image sera affichée après le .media-bodyetmedia-heading

    Un objet multimédia imbriqué

    Vous pouvez même continuer à imbriquer l'objet Media. Sans changer aucun des styles CSS que nous avons écrits.

    Header

    Header

    Ça marche!

    Un objet multimédia Unicode

    Il semble que nous ne soyons pas limités aux images.

    Sans changer aucun des styles CSS écrits, vous pouvez avoir un unicode pour représenter l'image.

     ? 

    Header

    Je me suis blotti dans un emoji là-bas.

    En supprimant le imget en le remplaçant par un divcontenant le code unicode souhaité, vous obtiendrez la sortie ci-dessus. Vous pouvez récupérer d'autres unicodes emoji ici.

    Un objet multimédia d'entité HTML

    Vous avez peut-être également utilisé des entités html comme indiqué ci-dessous.

    Header

    L'entité html utilisée dans cet exemple est et vous pouvez voir le résultat ci-dessous.

    Vous pouvez afficher le résultat de ces exemples dans ce CodePen.

    Exemple 6: Comment créer des éléments de formulaire avec Flexbox

    Il est difficile de trouver un site Web qui n'a pas de formulaire ou deux ces jours-ci.

    Considérez le balisage ci-dessous:

      … …  …  …

    Cet exemple montre la combinaison d'alignement des champs de saisie avec des boutons ou des plages de texte. La solution est encore une fois assez simple avec Flexbox.

    Lancez le contexte de formatage Flexbox:

    .form { display: flex}

    Assurez-vous que le champ de saisie occupe l'espace disponible:

    .form__field { flex: 1}

    Enfin, vous pouvez styliser les textes et les boutons ajoutés ou ajoutés comme bon vous semble.

    .form__item { ... }

    Vous pouvez afficher le résultat complet de cet exemple dans ce CodePen.

    Exemple 7: Comment créer une mise en page d'application mobile avec Flexbox

    Dans cet exemple, je vais vous expliquer le processus de mise en page de l'application mobile ci-dessous:

    Cependant, cet exemple est différent.

    J'expliquerai le processus de création de la mise en page mobile en pseudo-code, et vous irez de l'avant pour le construire.

    Ce sera une forme de pratique pour se mouiller les mains .

    Étape 1

    Retirez la mise en page de l'iPhone, et nous avons ceci:

    Étape 2

    Définissez le corps contenant comme un flex-container

    Étape 3

    Par défaut, le flex-directionde a flex-containerest défini sur row. Dans ce cas, changez-le en column.

    Étape 4

    Donnez aux articles 1 et 3 des hauteurs fixes telles que height: 50px.

    Étape 5

    L'élément 2 doit avoir une hauteur qui remplit l'espace disponible. Utiliser flex-growou la flexsténographieflex: 1.

    Étape 6

    Enfin, traitez chaque bloc de contenu comme un objet multimédia, comme indiqué dans un exemple précédent.

    Suivez les six étapes ci-dessus pour créer avec succès la mise en page de l'application mobile.

    Envie de devenir pro?

    Téléchargez ma feuille de triche CSS Grid gratuite et obtenez également deux cours Flexbox interactifs de qualité gratuitement!

    Obtenez-les maintenant