Comment créer des mises en page intelligentes CSS uniquement avec Flexbox

La boîte flexible, ou Flexbox en abrégé, est un ensemble de propriétés en CSS introduites en 2009 pour fournir un nouveau système de mise en page exceptionnel. Le module Flexbox est identifié comme faisant partie de la troisième version de CSS (CSS3).

Vous utilisez probablement déjà bon nombre des nouvelles propriétés de CSS3, telles que box-shadow , border-radius , background gradients , etc. Cependant, Flexbox n'a pas encore vu l'adoption généralisée qu'elle mérite. Cela peut être dû à tous les changements de rupture qu'il a subis au fil des ans, ou parce qu'il n'est que partiellement pris en charge dans Internet Explorer 10, ou simplement parce que Flexbox est un écosystème complet alors que les paradigmes précédents étaient principalement basés sur un seul, prêt à l'emploi. aller propriétés.

Il est super puissant et offre un large éventail d'options pour réaliser des mises en page dont on ne pouvait que rêver auparavant.

Cet article vous guidera à travers les bases de Flexbox et comment vous pouvez l'utiliser pour réaliser des mises en page vraiment cool qui nécessiteraient autrement des hacks CSS compliqués ou même JavaScript.

Pourquoi utiliser Flexbox ?

Par défaut, les éléments HTML au niveau du bloc s'empilent, donc si vous voulez les aligner sur une ligne, vous devez vous fier aux propriétés CSS comme float , ou manipuler la propriété display avec des paramètres de table ou de bloc en ligne.

Si vous choisissez d'utiliser float (gauche ou droite), vous devez effacer le wrapper à un moment donné pour le pousser jusqu'au tout dernier élément flottant, sinon, ils déborderont sur tout ce qui vient après. Cependant, avec float, vous êtes limité à l'organisation horizontale des éléments.

Alternativement, ou en plus, vous pouvez manipuler la propriété display pour essayer d'obtenir la mise en page que vous désirez ! Mais cela semble souvent au mieux compliqué, pour ne pas dire fastidieux, et se traduit souvent par une mise en page assez fragile qui ne sera pas nécessairement rendue de manière cohérente sur tous les navigateurs. Cette approche est particulièrement inefficace si vous ciblez plusieurs appareils de tailles différentes, ce qui est presque toujours le cas de nos jours.

Entrez Flexbox!

Avec une règle simple appliquée à un élément parent, vous pouvez facilement contrôler le comportement de mise en page de tous ses enfants.

Avec Flexbox, vous pouvez :

• Inversez l'ordre des éléments à l'intérieur d'un parent Flexbox.
• Enveloppez les éléments enfants dans des colonnes (le nombre de colonnes peut varier en fonction de la hauteur de l'enfant et du parent).
• Spécifiez la vitesse à laquelle les éléments grossissent ou rétrécissent lorsque la taille de la fenêtre change.
• Contrôle si les éléments sont rétractables ou non, quel que soit le type d'unité de largeur spécifié (relatif ou absolu).
• Modifiez l'ordre des éléments avec CSS (combinez cela avec des requêtes multimédias et vous trouverez des possibilités illimitées dans votre flux).
• Générez des distributions complexes des éléments pour qu'ils soient équidistants avec un espace autour ou juste un espace entre.
• Générez des éléments « renégats » qui s'enchaînent différemment (tout le monde à gauche mais un à droite, haut/bas… c'est vous qui décidez).
• Et, plus important encore, évitez le hack clear-fix pour de bon !

Je comprends que Flexbox peut être difficile au début. Je pense qu'il est plus facile d'apprendre dix propriétés CSS non liées que cinq avec une certaine interdépendance. Cependant, avec vos compétences CSS actuelles, et peut-être un peu d'aide de cet article, vous vous lancerez dans un nouvel univers CSS.

Les bases de Flexbox

Afficher

display est l'une des propriétés les plus basiques de CSS et est assez importante dans le contexte de Flexbox, car elle est utilisée pour définir un flex wrapper.

Il existe deux valeurs de wrapper flex possibles : flex et inline-flex .

La différence entre les deux est qu'un display: flex wrapper agit comme un élément de bloc tandis qu'un display: inline-flex wrapper agit comme un bloc en ligne. De plus, les éléments inline-flex grandissent s'il n'y a pas assez d'espace pour contenir les enfants. Mais à part ces différences, le comportement des deux serait le même.

Essayez l'exemple de code ci-dessous, réduisez la largeur de la fenêtre lorsque inline-flex est actif et… faites défiler.

Voir la propriété Pen Flexbox @Toptal - Parent - `display` par DD (@Diegue) sur CodePen.

 .wrapper { display: flex || inline-flex; }

Sens de la flexion

Maintenant que vous avez vu le premier exemple, vous pouvez en déduire que le comportement par défaut consiste simplement à créer une rangée d'éléments. Mais il y a plus :

• row (par défaut) : organise les éléments de gauche à droite (mais si RTL est défini, ce serait à l'envers).
• row-reverse : inverse l'ordre des éléments dans une disposition de ligne
• colonne : organise les éléments de haut en bas
• column-reverse : inverse l'ordre des éléments dans une disposition de colonne

Conseil : Les valeurs column et column-reverse peuvent être utilisées pour permuter les axes, de sorte que les propriétés qui affecteraient l'axe horizontal affecteraient l'axe vertical à la place.

Voir la propriété Pen Flexbox @Toptal - Parent - `flex-direction` par DD (@Diegue) sur CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Enveloppe flexible

Si vous vérifiez le premier exemple de code, vous découvrirez que les éléments enfants ne s'empilent pas par défaut dans un flex wrapper. C'est là que le flex-wrap entre en jeu :

• nowrap (par défaut) : empêche les éléments d'un conteneur flexible de s'enrouler
• wrap : enveloppe les éléments selon les besoins dans plusieurs lignes (ou colonnes, selon flex-direction )
• wrap-reverse : Tout comme wrap , mais le nombre de lignes (ou de colonnes) augmente dans la direction opposée à mesure que les éléments sont enveloppés

Voir la propriété Pen Flexbox @Toptal - Parent - `flex-wrap` par DD (@Diegue) sur CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Flux flexible

Vous pouvez combiner les propriétés flex-direction et flex-wrap en une seule propriété : flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Justifier le contenu

Cette propriété est utilisée pour contrôler l'alignement horizontal des éléments enfants :

• flex-start (par défaut) : les éléments sont alignés à gauche (similaire aux éléments en ligne avec text-align: left )
• flex-end : les éléments sont alignés à droite (similaire aux éléments en ligne avec text-align: right )
• center : les éléments sont centrés (similaire aux éléments inline avec text-align: center )
• space-around (où la magie commence) : chaque élément sera rendu avec la même quantité d'espace autour de chaque élément. Notez que l'espace entre deux éléments enfants séquentiels sera le double de l'espace entre les éléments les plus à l'extérieur et les côtés du wrapper.
• space-between : Tout comme space-around , sauf que les éléments seront séparés par la même distance et qu'il n'y aura pas d' espace près des bords de l'enveloppe.

Remarque : N'oubliez pas que flex-direction , lorsqu'il est défini sur column ou column-reverse , permute l'axe. Si l'un d'entre eux est défini, justify-content affectera l'alignement vertical, et non horizontal.

Voir la propriété Pen Flexbox @Toptal - Parent - `justify-content` par DD (@Diegue) sur CodePen.

Aligner les éléments

Cette propriété est similaire à justify-content mais le contexte de ses effets est les lignes au lieu du wrapper lui-même :

• flex-start : les éléments sont alignés verticalement sur le haut de l'emballage.
• flex-end : les éléments sont alignés verticalement sur le bas de l'emballage.
• center : les éléments sont centrés verticalement dans l'emballage (enfin, une pratique sûre pour y parvenir).
• stretch (par défaut) : force les éléments à occuper toute la hauteur (lorsqu'il est appliqué à une ligne) et toute la largeur (lorsqu'il est appliqué à une colonne) du wrapper.
• baseline : aligne verticalement les éléments sur leurs lignes de base réelles.

Voir la propriété Pen Flexbox @Toptal - Parent - `align-items` par DD (@Diegue) sur CodePen.

Aligner le contenu

Cette propriété est similaire à justify-content et align-items mais elle fonctionne dans l'axe vertical et le contexte est l'emballage entier (pas la ligne comme dans l'exemple précédent). Pour voir ses effets, vous aurez besoin de plus d'une ligne :

• flex-start : les lignes sont alignées verticalement vers le haut (c'est-à-dire empilées à partir du haut de l'emballage).
• flex-end : les lignes sont alignées verticalement vers le bas (c'est-à-dire empilées à partir du bas de l'emballage).
• center : les lignes sont centrées verticalement dans le wrapper.
• stretch (par défaut) : en général, cette propriété étire les éléments pour utiliser toute la hauteur verticale de l'enveloppe. Cependant, si vous avez défini une hauteur spécifique pour les éléments, cette hauteur sera respectée et l'espace vertical restant (dans cette rangée, sous cet élément) sera vide.
• space-around : chaque ligne sera rendue avec la même quantité d'espace autour d'elle-même verticalement (c'est-à-dire en dessous et au-dessus d'elle-même). Notez que l'espace entre deux rangées sera donc le double de l'espace entre les rangées du haut et du bas et les bords de l'emballage.
• space-between : Tout comme space-around , sauf que les éléments seront séparés par la même distance et qu'il n'y aura pas d'espace sur les bords supérieur et inférieur de l'enveloppe.

Voir la propriété Pen Flexbox @Toptal - Parent - `align-content` par DD (@Diegue) sur CodePen.

Croissance flexible

Cette propriété définit la proportion relative de l'espace disponible que l'élément doit utiliser. La valeur doit être un entier, où 0 est la valeur par défaut.

Disons que vous avez deux éléments différents dans le même flex wrapper. Si les deux ont une valeur flex-grow de 1, ils se développeront de manière égale pour partager l'espace disponible. Mais si l'un a une valeur flex-grow de 1 et l'autre une valeur flex-grow de 2, comme indiqué dans l'exemple ci-dessous, celui-ci avec une valeur flex-grow de 2 grandira pour prendre deux fois plus d'espace que le premier.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Voir la propriété Pen Flexbox @Toptal - Children - `flex-grow` par DD (@Diegue) sur CodePen.

Rétrécissement flexible

Semblable à flex-grow , cette propriété définit si l'élément est "rétractable" ou non avec une valeur entière. Similaire à flex-grow , flex-shrink spécifie le facteur de réduction d'un élément flexible.

Voir la propriété Pen Flexbox @Toptal - Children - `flex-shrink` par DD (@Diegue) sur CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Base flexible

Cette propriété est utilisée pour définir la taille initiale d'un élément avant que l'espace disponible ne soit distribué et que les éléments ne soient ajustés en conséquence.

Astuce : flex-basis ne prend pas en charge calc() et box-sizing: border-box dans tous les navigateurs, je vous recommande donc d'utiliser width si vous devez en utiliser un (notez que vous devrez également définir flex-basis: auto; ).

Voir la propriété Pen Flexbox @Toptal - Children - `flex-basis` par DD (@Diegue) sur CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Fléchir

Vous pouvez combiner les propriétés flex-grow , flex-shrink et flex-basis en une seule propriété : flex comme suit :

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Astuce : si vous envisagez d'utiliser flex , assurez-vous de définir chaque valeur (même si vous souhaitez utiliser des valeurs par défaut) car certains navigateurs peuvent ne pas les reconnaître (un bogue courant est lié au fait de ne pas avoir défini la valeur flex-grow ).

Aligner soi-même

Cette propriété est similaire à align-items mais l'effet est appliqué individuellement à chaque élément. Les valeurs possibles sont :

• flex-start : aligne verticalement l'élément sur le haut de l'enveloppe.
• flex-end : aligne verticalement l'élément au bas de l'enveloppe.
• center : centre verticalement l'élément dans l'emballage (enfin un moyen simple d'y parvenir !).
• stretch (par défaut) : étire l'élément pour qu'il occupe toute la hauteur du wrapper (lorsqu'il est appliqué à une ligne) ou toute la largeur du wrapper (lorsqu'il est appliqué à une colonne).
• baseline : aligne les éléments en fonction de leurs lignes de base réelles.

Voir la propriété Pen Flexbox @Toptal - Children - `align-self` par DD (@Diegue) sur CodePen.

Commande

L'une des meilleures choses incluses dans Flexbox est la possibilité de réorganiser les éléments (à l'aide de la propriété order ) sans avoir à modifier le DOM ou à utiliser JavaScript. Le fonctionnement de la propriété order est très simple. De la même manière que z-index contrôle l'ordre dans lequel les éléments sont rendus, l' order contrôle l'ordre dans lequel les éléments sont positionnés dans le wrapper ; c'est-à-dire que les éléments avec une valeur d' order inférieure (qui peut même être négative, soit dit en passant) sont positionnés avant ceux avec une valeur d' order supérieure.

Voir la propriété Pen Flexbox @Toptal - Children - `order` par DD (@Diegue) sur CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Rassembler le tout : exemples d'utilisation de Flexbox

Lorsqu'il s'agit de concevoir des mises en page, Flexbox libère un monde de possibilités. Ci-dessous, vous trouverez quelques exemples d'utilisation des propriétés Flexbox.

Composant d'alignement vertical

Avec Flexbox, vous pouvez aligner n'importe quoi verticalement, y compris plusieurs éléments à la fois. Sans Flexbox, vous deviez utiliser des techniques de positionnement ou de tableau qui nous obligeaient à créer un enfant pour contenir plusieurs éléments. Mais avec Flexbox, vous pouvez laisser derrière vous ces techniques fastidieuses et fragiles, et simplement définir quelques propriétés dans le wrapper et c'est tout, quel que soit le nombre de fois que le contenu à l'intérieur du conteneur change ou le type de changement !

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Voir la Pen Flexbox @Toptal - Les vrais usages que l'on peut donner - Alignement vertical par DD (@Diegue) sur CodePen.

Disposition moitié/moitié

Une mise en page « moitié/moitié » est une mise en page pleine hauteur avec deux colonnes, chacune avec son contenu centré verticalement. Il est généralement implémenté « au-dessus de la ligne de flottaison » (c'est-à-dire avant que les utilisateurs n'aient fait défiler la page après le chargement de la page).

En utilisant des techniques plus traditionnelles, vous pouvez créer cette mise en page avec des éléments flottants (d'une largeur de 50 % chacun), en effaçant les flottants dans le wrapper ("clearfix" :before et :after , overflow: hidden , ou un <div> loufoque avec clear: both; à la fin). Pourtant c'est beaucoup de travail et le résultat n'est pas aussi stable que ce que propose Flexbox.

Dans l'extrait de code suivant, vous verrez à quel point il est facile de définir la mise en page et aussi comment les enfants deviennent également des wrappers Flexbox puisque tout est également aligné verticalement.

Enveloppe extérieure:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Emballages intérieurs :

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Voir la section Pen Flexbox @Toptal - Real Uses We Can Give - Half-bleed par DD (@Diegue) sur CodePen.

Boutons de la barre de navigation pleine largeur

Une barre de navigation pleine largeur répartit l'espace de manière égale dans la même rangée d'éléments de barre de navigation, quel que soit le nombre d'éléments.

Dans l'exemple ci-dessous, il y a aussi des boutons iconiques sans ce comportement, démontrant que vous pouvez combiner les deux comme vous le souhaitez. Sans Flexbox, la réalisation de ces types de mises en page aurait nécessité du code JavaScript pour calculer l'espace disponible, puis le distribuer par programmation en fonction des boutons qui s'étendent et de ceux qui ne le font pas.

Flexbox rend cela beaucoup plus simple.

Propriétés de l'enveloppe :

 .navbar { display: flex; }

S'étendant sur les propriétés enfants :

 .navbar-item { flex-grow: 1; /* They will grow */ }

Propriétés enfants non étendues :

 .navbar-other { flex-grow: 0; // They won't grow } 

Voir Pen Flexbox @Toptal - Utilisations réelles que nous pouvons donner - Barre de navigation des boutons à fond perdu par DD (@Diegue) sur CodePen.

Présentations

Combien de fois avez-vous dû implémenter un ensemble de boîtes d'information avec des icônes et du texte dans différents projets ?

Cette distribution d'éléments est principalement utile dans le marketing numérique, mais peut avoir d'autres utilisations dans le développement de logiciels. Avec la puissance de Flexbox, vous pouvez définir une sorte de grille et également aligner des éléments, quel que soit leur nombre.

Propriétés de l'enveloppe :

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

Propriétés enfants :

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Pour les fenêtres de tablette et de mobile, la largeur varie entre 50 % et 100 %.

Voir la Pen Flexbox @Toptal - Real Uses We Can Give - Blurbs by DD (@Diegue) sur CodePen.

Amélioration de la compatibilité entre navigateurs

La syntaxe de Flexbox a changé plusieurs fois dans différentes versions de navigateur. Cela peut être un problème lors de la mise en œuvre d'une mise en page avec Flexbox et de la prise en charge d'anciens navigateurs Web, en particulier les anciennes versions d'Internet Explorer.

Heureusement, de nombreuses techniques et solutions de contournement pour faire fonctionner votre code sur la plus large gamme de navigateurs Web sont répertoriées dans Flexbugs, qui est une excellente ressource. Si vous suivez les informations sur ce site, vous obtiendrez de meilleurs résultats cohérents sur différents navigateurs Web.

Les tâches de préfixe sont particulièrement utiles à cet égard. Pour automatiser le préfixage des règles CSS, vous pouvez choisir l'un des outils suivants :

Rubis:

• Rails de préfixe automatique
• Intermédiaire Préfixe automatique

Node.js :

• Préfixe automatique PostCSS
• Préfixe automatique de grognement
• Préfixe automatique Gulp

Commencez à créer des mises en page intelligentes

Flexbox est un excellent outil pour accélérer, peaufiner et faire évoluer notre travail. La limite n'est que dans l'imagination du développeur.

Si vous avez besoin d'une aide visuelle pour planifier votre prochain aménagement, vous pouvez essayer ce terrain de jeu soigné :

Voir le Pen Flexbox @Toptal - Flexbox playground par DD (@Diegue) sur CodePen.

Ouvrez-le dans une nouvelle fenêtre.

Avec l'adoption croissante des navigateurs Web modernes par une majorité d'utilisateurs, l'utilisation de Flexbox vous permettra de créer facilement des mises en page étonnantes sans avoir besoin de vous plonger dans du code JavaScript désordonné ou de créer des CSS kludgy.