Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Qu'est-ce que Flexbox et Pourquoi l'Utiliser ? | Maîtriser Flexbox pour les Mises en Page
Fondamentaux De CSS

bookQu'est-ce que Flexbox et Pourquoi l'Utiliser ?

Flexbox, abréviation de Flexible Box Layout, est un module CSS conçu pour simplifier l’alignement, la distribution et l’organisation des éléments à l’intérieur d’un conteneur.

Flexbox utilise une relation parent-enfant. Le parent est appelé le conteneur flex, qui contrôle la disposition. Les enfants sont appelés éléments flex, dont la taille, la position et l’ordre peuvent être contrôlés à l’aide des propriétés flexbox.

Remarque

Flexbox se comporte différemment des éléments de type bloc et en ligne. Contrairement aux éléments de type bloc, les éléments flex ne s’empilent pas verticalement ; ils s’alignent par défaut en ligne ou en colonne. De plus, les marges aux bords du conteneur ne dépassent pas ses limites.

Flexbox en pratique

Flexbox fonctionne en alignant les éléments le long des axes du conteneur flex. Pour activer Flexbox, il suffit d’appliquer la propriété display: flex; à l’élément parent. À partir de là, il est possible de personnaliser l’alignement et la distribution des éléments à l’intérieur du conteneur.

index.html

index.html

index.css

index.css

copy
question mark

Dans quelle direction les éléments flex sont-ils disposés par défaut ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 1

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain the main differences between default and flexbox layouts?

How do I apply flexbox to my own HTML elements?

What are the main axes in flexbox and how do they work?

Awesome!

Completion rate improved to 2.56

bookQu'est-ce que Flexbox et Pourquoi l'Utiliser ?

Glissez pour afficher le menu

Flexbox, abréviation de Flexible Box Layout, est un module CSS conçu pour simplifier l’alignement, la distribution et l’organisation des éléments à l’intérieur d’un conteneur.

Flexbox utilise une relation parent-enfant. Le parent est appelé le conteneur flex, qui contrôle la disposition. Les enfants sont appelés éléments flex, dont la taille, la position et l’ordre peuvent être contrôlés à l’aide des propriétés flexbox.

Remarque

Flexbox se comporte différemment des éléments de type bloc et en ligne. Contrairement aux éléments de type bloc, les éléments flex ne s’empilent pas verticalement ; ils s’alignent par défaut en ligne ou en colonne. De plus, les marges aux bords du conteneur ne dépassent pas ses limites.

Flexbox en pratique

Flexbox fonctionne en alignant les éléments le long des axes du conteneur flex. Pour activer Flexbox, il suffit d’appliquer la propriété display: flex; à l’élément parent. À partir de là, il est possible de personnaliser l’alignement et la distribution des éléments à l’intérieur du conteneur.

index.html

index.html

index.css

index.css

copy
question mark

Dans quelle direction les éléments flex sont-ils disposés par défaut ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 1
some-alt