Permettez-moi de dire ceci en premier: la flexbox est facile. Que ce soit en raison de problèmes liés à une adoption précoce, ou parce que nous avons appris à penser en termes de flottants et de blocs, les concepteurs Web me disent souvent que Flexbox est complexe à mettre en œuvre. Mais je le répète: la flexbox est facile.
Il y a un truc pour comprendre la flexbox que je vous apprendrai, après quoi tout sera clair. Mais d'abord, je veux parler de ce qu'est la Flexbox.
Flexbox (ou le Module de disposition de boîte flexible pour lui donner son nom correct) est un ensemble de propriétés CSS qui se combinent pour disposer le contenu de manière réactive.
Flexbox est la première technique de mise en page CSS qui fonctionne pour le Web moderne. Il est juste de dire que jusqu’à ce que la flexbox soit supportée, il n’y avait pas de technique de mise en page qui fonctionnait bien avec la conception Web réactive.
Beaucoup de hacks ont circulé, comme la définition d'éléments à afficher: inline-block et leur permettant de se boucler. Mais cela présentait un certain nombre de problèmes pour les sites flexibles, notamment le manque de contrôle et l’effet de redimensionnement des éléments. Pour cette raison, de nombreux sites Web réactifs utilisent toujours JavaScript pour positionner le contenu.
Le W3C décrit Flexbox comme étant destiné à la mise en forme d'éléments d'interface utilisateur, tels que des éléments de menu, qui ne sont pas destinés à la mise en page complète.
La raison pour laquelle ce n'est pas prévu pour la mise en page de pages entières, est que flexbox a un module CSS compagnon, le Module de disposition de grille qui est destiné à la mise en page. La grille est considérée comme la technique la plus appropriée pour les mises en page complètes. Malheureusement, le support de la grille est très limité à l'heure actuelle et le terme «limité» signifie «aucun». Même la dernière version de Chrome ne le prend pas en charge sans drapeaux.
Heureusement, la prise en charge du navigateur pour Flexbox est beaucoup plus complète. Et comme il résout tant de problèmes de mise en page modernes, flexbox est un outil idéal jusqu'à ce que la grille soit finalement adoptée.
Flexbox est idéal pour styliser les composants sur une page. La véritable puissance de Flexbox, et la raison pour laquelle elle fonctionne beaucoup mieux que les autres options de mise en page, vient de la déclaration de styles sur des groupes d'éléments au lieu d'éléments individuels.
En ce qui concerne la mise en page, nous avons rarement besoin de positionner un seul élément - si nous prévoyons de le faire, il est préférable d’utiliser le positionnement. Flexbox fonctionne mieux lorsqu'il contrôle la relation entre les groupes d'éléments.
Concevez toujours une chose en la considérant dans son contexte plus large - une chaise dans une pièce, une pièce dans une maison, une maison dans un environnement, un environnement dans un plan de ville. - Eliel Saarinen
En tant que telle, la spécification Flexbox est divisée en deux parties, un ensemble de propriétés faisant référence à l'élément conteneur et un ensemble de propriétés faisant référence aux éléments qu'il contient.
La prise en charge du navigateur est généralement une question complexe. Plus complexe pour flexbox, car Flexbox a plusieurs syntaxes différentes. Une indécision précoce, un développement indépendant par certains fournisseurs de navigateurs et un processus itératif nous ont permis de disposer de plusieurs versions différentes de Flexbox.
Heureusement, avec l'ajout de certains préfixes de navigateur pour les navigateurs existants, nous pouvons désormais nous y fier. Selon caniuse.com , des navigateurs grand public actuels, seul IE9 posera un problème pour nous.
Heureusement, comme tous les CSS, si la flexbox échoue, elle échoue silencieusement. Ce qui signifie que IE9 va simplement l'ignorer.
Grâce à un manque criant de coopération entre les différentes branches des comités et des entreprises, la mise en œuvre de flexbox a presque rivalisé avec le chaos du début des années 2000, lorsque chaque navigateur implémentait chaque propriété de manière unique et incorrecte. Donner le bénéfice du doute à tous, les trois implémentations de flexbox étaient simplement une approche itérative qui a abouti à la solution commune la plus utile.
Il existe trois versions de la syntaxe flexbox dont vous devez être conscient: ancienne, intermédiaire et nouvelle. Différents navigateurs prennent en charge différentes syntaxes, par exemple IE10 prend en charge la syntaxe inbetween.
Tout comme les préfixes de navigateur, nous écrivons la syntaxe Flexbox du plus ancien au plus récent, de sorte que la syntaxe la plus récente prise en charge remplace les anciennes syntaxes.
Par exemple, nous écrivons display: flex comme ça:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Dans un souci de clarté, je ne vais pas me plonger dans les anciennes syntaxes, ni débattre des avantages des pré-processeurs, des post-processeurs et des différents scripts de conversion. Dans tous mes exemples, je vais utiliser la nouvelle syntaxe correcte.
En ce qui concerne le code de production, j'utilise une série de mixins Sass pour étendre le support Flexbox aux anciens navigateurs.
Il y a un excellent Sass mixin ici , que vous pouvez utiliser pour empêcher votre code de gonfler ou pour extraire la syntaxe héritée.
Le secret de la flexbox est que ce n’est pas du tout une boîte. Jusqu'à présent, toutes les mises en page sur le Web utilisaient un système cartésien de x et y pour tracer des points. Flexbox, en revanche, est un vecteur.
Ça sonne bien, non? Flexbox est un vecteur, ce qui signifie que nous définissons une longueur et que nous définissons un angle. Nous pouvons changer l'angle, sans affecter la longueur; et nous pouvons modifier la longueur sans affecter l'angle.
Cette nouvelle approche signifie que la terminologie de flexbox est initialement complexe. Par exemple, lorsque nous alignons des éléments sur le haut d'un conteneur Flex, nous utilisons flex-start, pas top, car si nous modifions l'orientation, flex-start continuera à s'appliquer, mais top ne le fera pas.
Une fois que vous avez compris cette approche, une grande partie de la flexbox est démystifiée.
La syntaxe de Flexbox est divisée en deux groupes: les propriétés qui contrôlent le conteneur et celles qui contrôlent les descendants directs du conteneur. Le premier est le plus utile, alors commençons par là.
Disons que nous voulons espacer les éléments dans un bloc. Nous voulons les espacer régulièrement. Utiliser Flexbox est vraiment facile à faire. La première chose dont nous avons besoin est un balisage pour essayer ceci sur:
Flexbox Layout C'est un page HTML simple , avec un div de maison , qui contient cinq chambres dont chacune a une classe identifiant leur fonction, cuisine, salle de bain, salon et chambre à coucher.
Ce que nous allons faire, c'est que la maison devienne un conteneur Flexbox. Toutes les propriétés Flexbox que nous mettons en place seront alors appliquées à ses enfants (les chambres ).
Afin de mettre en forme la pièce, nous devons d'abord déclarer la maison comme un conteneur Flexbox, puis lui indiquer comment nous voulons organiser les éléments enfants.
Pour déclarer maison en tant que conteneur Flexbox, nous utilisons le code suivant:
.house {background:#FF5651;display:flex;}Et c'est tout. Nous avons créé une boîte souple. Tout ce que nous avons à faire est de dire à flexbox comment agencer la pièce s. Nous pouvons le faire en utilisant la propriété Justification-Content .
Justifie le contenu a cinq valeurs possibles: centre, flex-start, flex-end, espace-around et espace-between. Celles-ci centrent les objets, les alignent au début (qui est en haut ou à gauche, comme nous le verrons ci-dessous), la fin (qui est le bas ou la droite), les espace espace égal entre chaque article, respectivement.
Nous utiliserons space-around:
.house {background:#FF5651;display:flex;justify-content: space-around;}Voici une démo . Remarquez comment il y a un double espace entre les objets comme il y a sur les deux bords extérieurs? C'est parce que chaque élément a le même espace à gauche et à droite. Si nous avions utilisé space-between, il n'y aurait plus d'espace sur les bords.
Je ne suis pas sûr de vous, mais les toilettes de ma maison sont un peu plus petites que celles du salon et bien que j'aie une petite cuisine, j'adorerais une cuisine beaucoup plus grande. Faisons donc quelques ajouts à notre code pour refléter cela:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Comme vous pouvez le voir dans cet exemple , nos chambres sont encore régulièrement espacées. Même si nous avons changé la taille. Flexbox est génial pour organiser le contenu.
Comme nous l'avons vu plus haut, l'une des raisons pour lesquelles Flexbox fonctionne si bien pour les concepteurs est qu'il est décrit comme un vecteur. À l’heure actuelle, flexbox ne supporte que quatre angles: 0, 90, 180 et 270 degrés. Donc, il est beaucoup plus simple de les considérer comme un axe.
Pour changer l'axe, nous utilisons la propriété flex-direction , qui a quatre valeurs possibles: row (la valeur par défaut - comme vous pouvez le voir dans les exemples ci-dessus, nos pièces sont disposées de gauche à droite) colonne inversée.
Si on change la direction de flexion en colonne, vous verrez dans cette démo que les pièces sont maintenant disposées verticalement, de haut en bas:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Comme je suis sûr que vous pouvez deviner, retour à la ligne et inversion de la colonne inverser l'ordre des éléments dans votre conteneur flexible.
Vous remarquerez que dans le dernier exemple, alors que la maison s'étend tout au long de la fenêtre d'affichage, elle s'étend à la hauteur maximale, même si elle est définie en flex-direction: colonne.
Afin de bien jouer avec le système de coordonnées CSS basé sur les cartes, le conteneur Flexbox est traité comme un élément de niveau bloc.
Tout comme display: block a un affichage compagnon : inline-block, pour afficher: flex a display: inline-flex.
inline-flex est actuellement le plus utile si vous déposez des éléments flexbox dans une mise en page existante et que vous en avez besoin pour jouer avec les éléments flottants et les éléments positionnés.
Comme nous l'avons vu, flexbox ne se soucie pas de savoir si elle est disposée horizontalement ou verticalement, quelle que soit la direction que vous choisissez soit considérée comme l'axe principal de la flexbox.
Mais la flexbox nous permet également de contrôler la position sur l'axe secondaire opposé.
La position sur l'axe secondaire est contrôlée par la propriété align-items ; il a cinq valeurs possibles: ligne de base, centre, extrémité flexible, flex-start et stretch.
la référence sera normalement l'option la plus utile. Il s'assure que les lignes de base du texte sont alignées. Pour tester cela, nous devons apporter quelques modifications à notre fichier HTML:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomVous verrez que j'ai ajouté du texte, et importé, puis appliqué une police Google. J'ai aussi changé la taille de la police dans la cuisine et la salle de bain, donc il y a une distinction claire.
Lorsque vous définissez la propriété align-items sur baseline, vous verrez dans cette démo que la ligne de base du texte correspond.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}align-items: le centre du centre est aligné verticalement (si flex-direction: row ou flex-direction: row-reverse ) ou horizontalement (si flex-direction: column ou flex-direction: column-reverse ). Voici une démo.
align-items: flex-start s'aligne sur le haut et align-items: flex-end s'aligne sur le bas (si flex-direction: row ou flex-direction: row-reverse ) ou vers la gauche et la droite (si flex-direction: colonne ou flex-direction: colonne inversée ). Voici une démo.
étirer, est une autre option très utile. stretch redimensionnera les objets, de sorte que chacun ait la même hauteur (ils grandiront, pas rétrécir). Voici une démo.
Dans nos autres exemples, nous avons défini explicitement la hauteur des éléments, ce qui est suffisant pour remplacer flexbox. Pour voir align-items: stretch , vous devez supprimer la hauteur de toutes les classes sauf une.
Jusqu'à présent, nous avons utilisé la flexbox pour mettre en page des éléments afin qu'ils soient redimensionnés dans l'espace, mais que se passe-t-il lorsque le contenu des éléments est trop grand pour tenir sur une seule ligne?
Pour faire une démonstration, je vais augmenter la taille de mes chambres:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomIci c'est à quoi ça ressemble maintenant
Si vous réduisez la fenêtre de votre navigateur, vous verrez que le contenu est coupé, car il n'y a pas d'espace pour cela. Heureusement, flexbox définit une propriété flex-wrap pour cette éventualité, qui a trois valeurs possibles: no-wrap (valeur par défaut), wrap et wrap-reverse.
wrap fait en sorte que tous les éléments qui s'étendent au-delà du conteneur soient enroulés sur une ligne ultérieure, comme une ligne de texte.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Si vous écrasez votre navigateur, vous verrez dans cette démo les articles sont maintenant enroulés sur de nouvelles lignes. Notez comment la propriété align-items: baseline est toujours appliquée? Le véritable pouvoir de Flexbox consiste à combiner ses propriétés.
Un concept important, que je couvrirai plus tard, est que flex-wrap: wrap-reverse n'inverse pas l'ordre des éléments, cela fait en sorte que tous les objets qui s'étendent au-delà du conteneur s'enroulent sur une ligne précédente, comme vu. dans cette démo .
Comme beaucoup de propriétés CSS, certaines propriétés Flexbox ont des versions abrégées qui sont implémentées de manière plus cohérente par les fabricants de navigateurs.
La propriété flex-flow est un raccourci pour les propriétés flex-direction et flex-wrap . Donc au lieu d'écrire:
flex-direction:row-reverse;flex-wrap:wrap;Nous pouvons utiliser la sténographie:
flex-flow:row-reverse wrap;Ci-dessus, nous avons utilisé la propriété align-items pour aligner les éléments sur les éléments baseline, position et stretch. Comme vous pouvez le voir dans le dernier exemple, cela se produit toujours, mais il se produit ligne par ligne.
Lorsque nos articles ont été emballés, nous avons la possibilité de définir comment ils seront disposés sur l'axe secondaire si le conteneur est plus grand que nécessaire.
Si nous réglons la hauteur minimale de notre maison à 1200px, notre disposition ressemble à ça .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Nous pouvons maintenant utiliser la propriété align-content pour disposer les éléments sur l’axe secondaire complet.
La propriété align-content a six paramètres: centre, fin de ligne, départ flexible, espace autour, espace entre et étirement. Ces valeurs donnent les mêmes résultats qu'ailleurs: centrage, alignement à une extrémité, espacement uniforme ou étirement.
Voici une démo avec la propriété mis à l' espace-autour.
Jusqu'à présent, toutes les propriétés que nous avons examinées ont été définies sur l'élément conteneur. Afin d'affiner les éléments, flexbox nous fournit également un certain nombre de propriétés pouvant être définies sur des éléments individuels.
Pour clarifier cela, supprimons une partie de notre code:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomIci c'est à quoi ça ressemble
La première propriété d'élément flexbox est la propriété flex nommée avec confusion. flex est une valeur de la propriété display sur le conteneur, mais c'est aussi une propriété à part entière.
La propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis . Le rôle de ces propriétés est d'étirer ou de réduire la taille du contenu pour qu'il remplisse entièrement l'espace.
La propriété flex-grow indique aux éléments qu'ils peuvent agrandir, si nécessaire, afin que les éléments remplissent complètement la largeur (pour la direction de flexion: ligne ) et la hauteur (pour la direction de flexion: colonne ).
La propriété flex-grow prend un ratio. Donc, si nous définissons la propriété flex-grow à 1, tous nos éléments auront la même taille que vous pouvez voir ici .
.room {background:#00AAF2;height:90px;flex-grow:1;}En plus de prendre une taille égale, nous pouvons également définir différents ratios. Je veux toujours que ma cuisine soit plus grande que mes toilettes, alors réparons ça dans cette démonstration .
.kitchen {height:300px;flex-grow:2;}flex-shrink fonctionne exactement comme flex-grow sauf qu'il réduit l'objet si nécessaire, au lieu de le développer.
Si vous redimensionnez le navigateur, vous verrez qu’à différentes tailles, ma cuisine ne double pas exactement la largeur des autres pièces . Cela est dû à la propriété flex-basis .
flex-based détermine le mode de calcul des propriétés de flexion et de flexion . Il a 2 valeurs: auto (la valeur par défaut) et 0.
Si défini sur 0, la totalité de l'élément est prise en compte. S'il est défini sur auto, il s'agit du remplissage autour du contenu de l'élément qui est redimensionné. En d'autres termes, 0 ignore la taille du contenu de l'élément lors du calcul et Auto le prend en compte. Il y a un diagramme pratique fourni par le W3C qui explique cela.
Voici une démo de ce qui se passe quand je fixe la base de flexibilité: 0 sur l'exemple ci-dessus.
flex-basis: 0 est particulièrement utile si vous souhaitez espacer les articles de manière uniforme, quel que soit leur contenu.
Comme indiqué ci-dessus, la propriété flex est un raccourci pour ces propriétés, et vous trouverez le moyen le plus fiable de définir ces valeurs.
L'ordre des valeurs est flex-grow, flex-shrink, flex-based. Donc, pour définir une valeur de croissance de 2, une valeur de réduction de 1 et une base de 0, vous utiliseriez:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}L'une des meilleures caractéristiques de flexbox est sa capacité à modifier l'ordre des éléments sans affecter le balisage. Ceci est particulièrement utile pour l'accessibilité, car cela nous permet de coder le balisage de manière appropriée, puis de l'afficher de manière optimale.
Pour ce faire, nous utilisons la propriété de commande de l'article.
En regardant notre exemple, les toilettes sont juste à côté de la cuisine. Je préférerais que ce soit à côté des chambres, afin que je puisse sauter directement dans la douche d'un matin, alors bougeons-le. C'est actuellement le 2ème article, nous voulons que ce soit le troisième. Nous définissons donc sa propriété en conséquence dans cette démo .
.washroom {height:60px;order:2;}Voyez comment il a sauté jusqu'au bout de la rangée? C'est à côté des chambres, mais pas comme nous le voulions. Ceci est un jeu majeur dans la flexbox, car de nombreux développeurs (y compris moi-même) s'attendent initialement à un ordre fonctionnant comme un tableau.
Ordre fonctionne réellement comme CSS ' z-index, ce qui signifie que si vous ne définissez pas explicitement un ordre pour un élément, il est supposé être inférieur à celui d'un article pour lequel une valeur a été explicitement définie.
Nous voulons que les toilettes échangent avec le salon, alors dans cette démo Les seuls autres éléments nécessitant une commande sont les chambres à coucher .
.washroom {height:60px;order:2;}.bedroom {order:3;}Remarquez comment les deux chambres partagent le même numéro de commande? Dans des cas comme ceux-là, le navigateur utilisera l'ordre DOM.
La propriété de l'élément final est align-self. Il est utilisé pour modifier l'alignement de l'élément sur l'axe secondaire. Les éléments d'alignement sont utilisés pour aligner tous les éléments, et cette propriété vous permet de désactiver ce paramètre de couverture.
Il prend les cinq mêmes valeurs que la propriété équivalente sur le conteneur: ligne de base, centre, extrémité flexible, démarrage flexible et étirement.
Voici une démo des toilettes ré-alignées.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox est une option puissante pour la mise en page du contenu. Bien qu'il ne s'agisse pas de pages entières, son support supérieur à Grid Layout en fait une excellente option, en particulier pour les premiers sites Web mobiles.
Pour démontrer, nous allons mettre en place une page simple qui utilise certaines des techniques décrites ci-dessus.
Tout d'abord, notre balisage et certains styles de base pour la page.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Comme tu peux voir , J'ai une div avec la page d' identification . Page interne J'ai une liste non classée de nouvelles. À la suite des nouvelles, j'ai l'en- tête, qui se trouve sous le contenu des nouvelles pour le bénéfice de l'accessibilité. Enfin, j'ai un pied de page.
La première chose que je veux faire est de déplacer l’en- tête en haut de la page. Pour ce faire, nous allons définir la page comme un conteneur Flexbox. Ensuite, nous définirons la direction de la colonne. Puis attribuez un ordre aux éléments enfants de chaque page .
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}L'étape suivante consiste à disposer l'en- tête. Les éléments enfants à l'intérieur des conteneurs flexbox peuvent être des conteneurs flexbox à part entière, de sorte que nous pouvons utiliser flexbox pour espacer les éléments d'en- tête .
Définissons l'en- tête comme étant un conteneur Flexbox, puis répartissons le contenu de manière uniforme, sans marge supplémentaire sur les côtés, et vérifions enfin que les éléments de menu se trouvent sur la même ligne de base que le logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Nos nouvelles vont être des espaces réservés pour les articles vedettes, elles doivent donc être de taille importante pour faire place au texte, à une image ou à une vidéo. Nous avons donc besoin d'eux pour emballer.
Définissons la div en news comme un conteneur Flexbox. Ensuite, donnons au newsItem quelques dimensions minimales et un peu de couleur pour que nous puissions les voir clairement.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Maintenant, nous devons définir le conteneur de nouvelles à envelopper, et les newsItem à développer pour remplir l'espace disponible.
#news {order:2;display:flex;flex-flow:row wrap;}Le défi que nous avons maintenant, c'est que lorsque les newsItems ne sont pas distribués de manière égale, le plus gros élément (G) se trouve en bas. Sur la plupart des sites, nous voulons donner le plus de place possible au contenu le plus élevé. Nous pouvons résoudre ce problème en définissant le wrap sur wrap-reverse.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Cela réordonne les articles, mais en lisant en haut à gauche, ils sont maintenant hors service. Nous devons donc inverser l'ordre en définissant la direction sur la ligne inverse.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Cela place les articles dans l'ordre consécutif, en lisant de gauche à droite, de haut en bas; avec les plus gros articles toujours en haut. Mais je ne veux pas avoir à modifier l'ordre des histoires dans mon balisage pour forcer le point A à venir avant le point B. La dernière chose que je dois faire est donc de changer l'ordre des articles.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Le dernier élément à styler est le pied de page. Nous voulons le mettre en forme, un peu comme l'en- tête, mais comme le pied de page ne comporte que trois éléments enfants (comparé aux quatre en- tête ), nous allons définir le paragraphe comme étant deux fois plus large que le logo. .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Cela fonctionne très bien à la taille des ordinateurs de bureau, mais réduisez votre navigateur et vous verrez qu'il est trop étroit sur les petits appareils. Changeons donc le code pour qu'il soit présenté sous la forme de colonnes inférieures à 600 pixels, et revienne à une ligne supérieure à 600 pixels.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}Et voila. Une approche moderne du contenu sur une page Web, largement supportée et facile à mettre en œuvre.
La puissance de flexbox est que ses propriétés peuvent être combinées pour nous donner un contrôle précis sur nos dispositions, avec la syntaxe la plus simple possible.