En quelques minutes, apprenez à maîtriser le module CSS Flexbox Layout pour agencer vos pages web avec agilité et élégance. Nous vous recommandons Flexbox pour créer vos pages en Responsive Design.
Décryptage…
Flexbox Layout : le module CSS pour les justifier tous !
Après la préhistoire des tableaux HTML pour la mise en page des sites web, vinrent les blocs DIV en CSS. Mais suite à une période douce où l’on s’extasiait devant les possibilités nouvelles… ce fut la guerre ! On bataillait avec les float, les inline – et leurs jeunes frères inline-block. S’alternaient, dans les lignes de code, les boites flottantes et les boites vides ne servant qu’à leur dire clear:both;… ce qui, dans le langage compris par le navigateur web signifie : « tu peux retourner à la ligne, s’il te plait ? »…
Malheureusement, nombreux sont ceux qui, perdus dans les dédales et les enchevêtrements de blocs, se tiraient les cheveux en hurlant : « Mais pourquoi il NE VA PAS à la ligne ? J’ai mis un CLEAR (censuré) ! »
Et nous ne vous parlons pas ici des problèmes des tailles desdits blocs qui refusaient parfois d’obéir à la simple logique des pourcentages, pour d’étranges raisons que seuls les grands sorciers du webdesign comprenaient…
Bref, tout cela fait parti du passé !
Aujourd’hui, avec CSS3, vous avez les joies de deux modules qui résolvent tous les problèmes des temps anciens : Grid Layout et Flexbox Layout. C’est ce dernier qui nous intéresse particulièrement ici. Il apporte la solution miracle pour placer, distribuer et aligner les éléments dans un conteneur, même sans connaitre leur taille ou si celle-ci est dynamique, d’où le nom : Flex.
Nos sites professionnels ont besoin de flexibilité
Même si cette phrase ressemble à une citation politico-économique, il s’agit surtout, pour tous les sites, d’être adaptés à la diversité des supports : desktop, tablette, mobiles de toutes proportions, consulté verticalement ou horizontalement…
C’est cette adaptation à ces paramètres inconnus – « Quelle est la largeur de ma page web ? » par exemple – que permet Flexbox. Pour vous en expliquer le fonctionnement, il va falloir en passer par un peu de technique.
Voici un extrait de la formation « intégration CSS avec Flexbox » de Steven Sil dédié au sujet :
Organiser les éléments CSS avec flex
Dans l’état actuel de notre code ci-dessus, les boîtes à l’intérieur de « nom-unique » sont empilées en colonne. Un ajout va changer les choses :
#nom-unique {
border: 3px solid blue;
display: flex;
flex-flow: row-reverse wrap;
}
Ainsi, non seulement les boites s’alignent horizontalement, mais elles le font dans le sens inverse, avec leur taille adaptée à leur contenu. Nous pouvons retrouver l’affichage en colonne avec la valeur column pour la propriété flex-flow. Vous avez également les valeurs : row et column-reverse.
A noter que flex-flow correspond à 2 propriétés réunies : flex-direction et flex-wrap. C’est pourquoi il il y a un espace. Par défaut, la seconde valeur est paramétrée sur nowrap : si les boites débordent du conteneur, elles ne retournent tout de même pas à la ligne. Ici, avec wrap, elles iront docilement à la ligne.
Comme le laisse penser le titre de cet article, dorénavant, grâce à Flex, on va pouvoir justifier et organiser les éléments exactement comme on le souhaite.
Pour cela, nous allons utiliser la propriété justify-content qui peut se voir attribuer les valeurs :
- flex-start
- flex-end
- center
- space-between
- space-around
Une autre propriété utilise ces valeurs pour aligner le contenu lorsqu’il y a plusieurs lignes : align-content.
Vous pouvez également attribuer ces mêmes valeurs à la propriété align-items pour les aligner sur l’axe secondaire, soit l’axe vertical sur une direction row, l’axe horizontal sur celle en colonne. Cette propriété a également 2 autres valeurs : stretch (celle par défaut) qui étire pour remplir le conteneur, et baseline qui les aligne sur le texte.
Agir sur les éléments enfants en Flex
Le conteneur, en tant que parent, indique le comportement général de ce qu’il contient. Mais on peut aussi mettre des consignes pour des « boites » spécifiques à l’intérieur du conteneur.
Voyons ces ajouts, par exemple :
#nom-unique {
border: 3px solid blue;
display: flex;
flex-flow: row wrap;
align-content: center;
height: 600px; /*Je rajoute une hauteur ici pour montrer l'effet de align-self */
}
.boite-dedans:nth-child(1) {
background: yellow;
order: 2;
flex:3 1 50%;
height:300px; /*Hauteur fixée pour mieux voir l'effet de align-self*/
}
.boite-dedans:nth-child(2) {
background: red;
order: 3;
align-self: flex-end;
flex: 1 2;
height:300px;
}
.boite-dedans:nth-child(3) {
background: green;
order: 1;
flex: 2 1 30%;
height:300px;
}
En ajoutant ces éléments , vous pouvez constater que :
- On a pu changer l’ordre des boites en indiquant celui-ci avec le paramètre order.
- Nous avons modifié l’alignement de la boite rouge en lui définissant une valeur spécifique à la place de celle du conteneur. Cette valeur peut-être : auto, flex-start et flex-end.
- La propriété flex (à ne pas confondre avec la valeur du paramètre display) conjugue, dans l’ordre, les propriétés : flex-grow, flex-shrink et flex-basis.
La première indique la proportion d’espace libre prise par l’élément, en comparaison des autres boites.
La seconde, au contraire, indique la proportion dans laquelle il doit se réduire, si besoin, pour que les boitent « passent » dans le conteneur.
La dernière est la taille de l’élément – exprimée en pourcentage (%), pixels (px), dimension de police (em) ou autres – avant que celui-ci ne soit agrandi ou rétréci par rapport à l’espace disponible.
La valeur par défaut de cette triple propriété est 0 1 auto.
Il ne vous reste plus qu’à vous amuser à changer les valeurs sur l’exemple pour voir les effets produits. Vous vous extasierez sur vos prochaines créations de pages web en vous disant : « Mais comment faisaient nos ancêtres ? » !
Notre sélection de tutos et formations Flexbox
Vous souhaitez vous mettre sérieusement à FlexBox ? Voici notre sélection de tutoriels vidéo consacrés au sujet :
- Intégration CSS Moderne avec Flexbox
- Flexbox : Mise en page fléxible en CSS
- Comment fonctionne l’intégration CSS avec Flexbox ?
- Ayez le bon réflexe CSS : utilisez la technologie Flexbox !
Tout ce qu’il vous faut pour développer vos compétences CSS avec une intégration moderne, qui sera compatible avec n’importe quel écran !