Dans le cours : CSS : Maîtriser les Flexbox

Connaître les problèmes que les flexbox tentent de résoudre - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Connaître les problèmes que les flexbox tentent de résoudre

“

Avant de commencer l'étude des flexbox, examinons rapidement quelques problèmes courants rencontrés par les développeurs CSS lorsqu'ils n'utilisent pas les flexbox. Commençons par cette mise en page tout à fait classique. J'ai un header, un en-tête ici au-dessus. Ensuite, j'ai une zone de navigation. Et puis au niveau de la zone de contenu, j'ai deux colonnes. Pour placer ces colonnes côte à côte, J'ai utilisé float: left sur la colonne de gauche et float: right sur la colonne de droite. Résultat des courses : mon élément footer, mon pied de page qui normalement devrait apparaître dans le fond de la fenêtre, maintenant, il apparaît à la suite de la colonne de droite, ou plutôt autour de la colonne de droite. Bref, peu importe la manière dont vous décrivez cette situation, ce n'est certainement pas cela que l'on voulait afficher sur notre page web. Il s'agit ici d'un effet secondaire indésirable de la propriété float. C'est un problème qui est assez facile à résoudre. Il suffit de mettre un clear: both au niveau de notre footer. Et donc le footer retrouve son emplacement normal, c'est-à-dire le fond de la fenêtre. Oui mais voilà, il reste encore un problème à résoudre, c'est celui de la hauteur de ces deux colonnes. Avec la technique du float: left/float: right, il est impossible d'obtenir deux colonnes de même hauteur sans tricher. On utilise également la propriété float du CSS pour redresser des barres de liens. Donc ici, j'ai cinq liens dans le coin supérieur gauche de mon site. Ces liens, naturellement, sont affichés les uns au- dessus des autres, mais j'ai utilisé float: left pour les placer les uns à côté des autres. Résultat des courses, nous avons l'impression que la zone de navigation est intégrée à la zone de contenu. Il s'agit de nouveau d'un effet secondaire indésirable de la propriété float: left. Je peux également placer mes barres de liens sur la droite. À ce moment-là, j'utilise float: right plutôt que float: left. Mes liens sont bien placés sur la droite, ça c'est correct. Mais par contre, j'ai toujours l'impression que ma zone de navigation est intégrée à ma zone de contenu. Et puis regardez bien l'ordre dans lequel apparaissent ces liens : Lien 5, Lien 4, Lien 3, Lien 2, Lien 1. Autrement dit, ces liens apparaissent dans l'ordre inverse. Et ça, de nouveau, c'est un effet secondaire indésirable de float: right. Alors de nouveau, c'est facile de résoudre ce problème. Il suffit tout simplement d'inverser l'ordre de ces liens dans le code HTML. Mais voilà, cette solution n'est pas idéale. Ce n'est pas idéal d'un point de vue de développement, parce que ça va considérablement compliquer la génération de ces liens par un CMS par exemple. Ce n'est pas non plus idéal d'un point de vue accessibilité. Je pense ici aux technologies d'assistance qui aident les personnes malvoyantes, par exemple, à naviguer sur nos pages. Eh bien, ces technologies d'assistance vont voir les différents liens dans l'ordre dans lequel ils sont définis dans le code HTML, c'est-à-dire dans l'ordre inverse dans lequel ils apparaissent sur la page. Donc ça, c'est un problème que l'on ne peut pas résoudre ici. Alors, pour ce qui est des liens, on n'est pas obligé finalement d'utiliser la propriété float. On peut également utiliser display: inline-block pour placer ces liens côte à côte. Résultat des courses, eh bien, nous avons maintenant une zone de navigation qui est bien séparée de la zone de contenu. Donc ça, c'est un point positif pour la propriété display: inline-block. Mais remarquez que du coup, nous avons des espaces entre ces boutons, des espaces qui ne sont définis ni dans le code ni dans la feuille de style. Donc il ne s'agit pas non plus d'une solution idéale. Voilà quelques problèmes couramment rencontrés par les développeurs CSS, des problèmes auxquels les flexbox apportent une solution et très souvent une solution très simple à mettre en place.

Table des matières