CSS Flexbox : plus de pos­si­bi­li­tés pour le Webdesign

Les feuilles de style en cascade (CSS) dé­fi­nis­sent la pré­sen­ta­tion des sites internet. Tandis que le HTML ne renferme que les prin­ci­paux éléments de base, les CSS per­met­tent quant à elles une con­cep­tion de sites plus complexes : insérer des images, disposer du texte, intégrer dans le site des éléments qui auraient tendance à dépasser. Ce précieux langage de balisage est cons­tam­ment mis à jour pour sim­pli­fier la création des sites internet et pour offrir aux web­de­sig­ners de nouvelles pos­si­bi­li­tés dans leur travail de con­cep­tion. CSS Flexbox est un tel outil précieux qui permet de créer des sites internet à l’ère du téléphone portable.

Une des missions d’une CSS, est d’assurer la dis­po­si­tion des dif­fé­rents éléments d’une page. La feuille de style détermine l’em­pla­ce­ment des textes, des images et des autres éléments gra­phiques. Elle précise au pixel près, où chacun de ces éléments doit être po­si­tionné sur l’écran. Cela n’est possible qu’à condition de connaître la taille de l’écran et le rapport d’aspect de l’image. Avec l’internet mobile, les nom­breuses tailles d’écrans avec des rapports d’aspect tellement divers (les té­lé­phones portables modifient gé­né­ra­le­ment l’image quand vous les pivotez), il est difficile, voire im­pos­sible d’avoir un résultat sa­tis­fai­sant si on ne recourt pas à des CSS.

Le Flexbox (ou plus pré­ci­sé­ment la mise en page CSS Flexible Box) a un mode de fonc­tion­ne­ment plus in­tel­li­gent et plus dynamique. La dis­po­si­tion de la page s’ajuste de façon dynamique à l’écran qui est employé, ce qui est par­fai­te­ment en accord avec le Res­pon­sive Design). Les dif­fé­rents items de la page sont parfois agrandis, parfois resserrés, avec un souci permanent : tout doit rester par­fai­te­ment lisible. Pour que cela soit possible, et sans modifier com­plè­te­ment la mise en page souhaitée, Flexbox repose son travail sur deux axes : l’axe principal est disposé dans le sens ho­ri­zon­tal, et l’axe per­pen­di­cu­laire dans le sens vertical. Le po­si­tion­ne­ment des dif­fé­rents items à l’intérieur de la page sera assuré au moyen de ces deux axes. La page sera alors conçue en tenant compte des rapports entre les dif­fé­rents éléments qui la composent. CSS Flexbox veille alors à exploiter de la bonne manière l’espace autour des dif­fé­rents items.

De nos jours, les web­de­sig­ners ont tout intérêt à se fa­mi­lia­ri­ser avec CSS Flexbox. Tra­vail­ler avec des tailles d’écrans variables est tellement plus simple avec une telle technique. Avec ce module, quelques lignes de code suffisent pour obtenir un résultat sa­tis­fai­sant.

Le travail de Flexbox repose sur un Conteneur (flex container), dans lequel on va in­tro­duire plusieurs éléments (flex items). Le conteneur transmet ses pro­prié­tés aux dif­fé­rents items. C’est-à-dire : les dif­fé­rents éléments sont les con­te­neurs flexibles, dont la flexi­bi­lité réside dans le fait qu’ils se trouvent à l’intérieur du conteneur.

Chaque axe détermine une direction. Gé­né­ra­le­ment l’axe principal est orienté de gauche à droite, et l’axe per­pen­di­cu­laire du haut vers le bas. On dit de Flexbox que c’est un système à une dimension : les dif­fé­rents éléments sont disposés en ligne ou en colonne. Il n’est prévu aucune com­bi­nai­son ligne/colonne. Si l’on opte pour une dis­po­si­tion en ligne (ce qui est d’ailleurs l’option par défaut), CSS Flexbox essaiera de disposer tous les items en ligne. On peut cependant « prendre la main » et forcer un retour à la ligne.

Avant de pouvoir disposer des éléments sur une page, vous devez commencer par les créer. Cela se fait comme d’habitude avec HTML :

De cette manière, les trois éléments devraient être les uns en dessous des autres. Avec le CSS, nous ré­par­tis­sons les éléments sur l’axe principal.

Dans cette feuille de style, nous avons commencé par créer le conteneur. Flexbox permet d’ajouter la mention « display: flex; ». Comme nous n’avons pas donné de précision par­ti­cu­lière, les éléments sont disposés les uns après les autres, de gauche à droite. Grâce à la propriété « justify-content », vous disposez de 5 dif­fé­rentes manières de disposer les items.

• flex-start : aligné à gauche
• flex-end : aligné à droite
• center : centré
• space-around : répartis sur la ligne avec un es­pa­ce­ment égal autour de chacun
• space-between : répartis sur la ligne avec un es­pa­ce­ment égal entre chacun

Le reste du code n’a qu’une valeur « cos­mé­tique » et n’a en fait aucun lien avec les con­te­neurs flexibles.

Avec Flexbox, les CSS ont par défaut une orien­ta­tion ho­ri­zon­tale. Il est cependant possible d’aligner les éléments en colonne. On peut aussi inverser la direction, c’est-à-dire aller de gauche à droite ou de bas en haut. Pour ce faire, on utilise la propriété « flex-direction » :

• row : de gauche à droite
• row-reverse : de droite à gauche
• column : de haut en bas
• column-reverse : de bas en haut

La propriété « justify-content: flex-end; » n’est pas la même que « flex-direction: row-reverse; ». Alors qu’avec la première variante, le dernier élément est po­si­tionné com­plè­te­ment à droite, la deuxième variante modifie toute la dis­po­si­tion. Le premier élément dans le code ap­pa­rai­trait com­plè­te­ment à droite.

Jusque-là, nous avons réparti les con­te­neurs flexibles de façon équitable. Mais on ne veut pas toujours traiter tous les objets de la même manière dans le webdesign. On souhaite par exemple présenter un texte autrement qu’une image. Pour ce faire, on peut regrouper les éléments dans le code HTML :

Avec la propriété « justify-content » vous pouvez aligner des items sur l’axe ho­ri­zon­tal, en res­pec­tant un certain rapport. Si on veut quand même déplacer ses con­te­neurs du haut vers le bas (sur l’axe per­pen­di­cu­laire), il faut utiliser la propriété « align-items ». Ici aussi, vous disposez de 5 dif­fé­rentes options :

• center : les items sont centrés
• flex-start : les items sont alignés sur le bord supérieur.
• flex-end : les items sont alignés sur le bord inférieur.
• stretch : les items sont étirés.
• baseline : in­dé­pen­dam­ment du contenu, les objets sont alignés sur la ligne de base.

À première vue, les deux options « flex-start » et « baseline » semblent donner le même résultat. L’effet sera pourtant différent si on a des objets qui sont imbriqués les uns dans les autres. Alors que « flex-start » associe les deux con­te­neurs flexibles qui sont situés au même niveau de hié­rar­chie, la propriété « baseline » tiendra aussi compte des éléments renfermés dans les con­te­neurs.

Pour centrer trois objets de tailles dif­fé­rentes, on doit donc recourir au code suivant :

Vous pouvez aussi jouer sur l’étirement vertical au moyen de ces retours à la ligne. Si on place beaucoup d’objets dans un conteneur, ils se pla­ce­raient les uns en dessous des autres, et l’uti­li­sa­teur devra faire défiler son écran vers le bas, ce qui le fera quitter la zone d’affichage. Avec la propriété « flex-wrap » vous pourrez répartir les éléments sur plusieurs lignes.

• nowrap : aucun retour à la ligne
• wrap : retour à la ligne
• wrap-reverse: retour à la ligne (avec une dis­po­si­tion dans un ordre inversé)

Jusque-là, nous avons toujours appliqué la dis­po­si­tion au conteneur complet. Tous les éléments à l’intérieur du conteneur se sou­met­tent aux in­di­ca­tions globales. Cela vous facilite le travail, mais a aussi un effet res­tric­tif. Avec CSS Flexbox, un Web­de­sig­ner peur aussi définir des ex­cep­tions. Pour ce faire, on utilise la fonction « order ». La valeur par défaut (si rien d’autre n’a été défini) est 0. La valeur d’ordre attribue l’objet à un groupe abstrait. Tous les éléments que nous avons créés jusque-là ap­par­tien­nent au même groupe, puisqu’ils ont tous la valeur 0. A partir de cette valeur, il est possible de faire avancer certains objets vers l’avant (-1) ou les ramener vers l’arrière (1).

Si on attribue donc la valeur zéro à tous les éléments, et que l’on donne la valeur 1 à un objet sé­lec­tionné, celui-ci ne sera affiché qu’après tous les autres. Cette procédure peut être exploitée avec d’autres valeurs (su­pé­rieures ou in­fé­rieures). Il s’agit ici uni­que­ment d’une pré­sen­ta­tion visuelle : l’ordre logique conforme au document HTML reste inchangé.

Jusque-là, nous avons juste abordé la dis­po­si­tion flexible des objets. Dans le code donné à titre d’exemple, la dimension des objets a toujours été gérée de manière classique par le CSS. Les con­te­neurs flexibles peuvent aussi être ajustés en fonction de leurs di­men­sions. Pour ce faire, on utilise la propriété « flex ». Comme pour leur dis­po­si­tion, vous pouvez répartir des éléments en dif­fé­rents groupes. Plus la valeur est grande, plus l’élément occupera de place.