Dans le cours : CSS : Maîtriser les Flexbox

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 24 100 cours dispensés par des experts.

Effectuer des retours à la ligne

Effectuer des retours à la ligne - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

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

Effectuer des retours à la ligne

“

Voyons maintenant ce qui se passe lorsqu'on augmente le nombre d'éléments flex. Ici, j'ai augmenté le nombre d'éléments <li> dans mon élément <ul>. J'ai maintenant quinze flex items au sein de mon flex container. Au niveau de la propriété flex-direction, la valeur est égale à row, c'est-à-dire que c'est la valeur par défaut, donc mon axe principal va de gauche à droite. Rappelez-vous que les flex items se placent le long de cet axe principal. Dans mon document, voilà ce que ça donne : mes flex items sont placés le long de mon axe principal, qui va de gauche à droite, mais ils ne passent pas à la ligne. Vous voyez qu'on continue tranquillement à placer ces éléments côte à côte le long de cet axe principal, quitte à déborder du flex container et à générer une barre de défilement horizontale. On peut également contrôler cet aspect-là des flexbox. Pour cela, on a la propriété flex-wrap. Cette propriété a trois valeurs possibles. La valeur par défaut, c'est nowrap. Nowrap, cela veut dire «…

Table des matières