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.

Définir un conteneur flex

Définir un conteneur flex

Nous sommes maintenant prêts à commencer l'étude des flexbox. Et dans ce premier chapitre, nous allons découvrir le fonctionnement général des flexbox et les principales propriétés CSS qui affectent leur fonctionnement. J'ai donc ici une toute simple page web. J'ai cinq éléments superposés les uns aux autres dans la partie supérieure de la fenêtre, et une petite zone de texte dans la partie inférieure. Au niveau du code HTML, c'est tout simple, j'ai une liste non ordonnée avec cinq éléments li dedans. Et puis j'ai une section avec un petit peu de texte. Remarquez que cette page HTML est déjà liée à une feuille de style CSS externe. C'est dans cette feuille externe que j'ai défini les styles qui régissent l'apparence actuelle de cette page. Alors j'aimerais placer les éléments Un, Deux, Trois, Quatre, Cinq côte à côte. Et pour cela, je vais utiliser les flexbox. Retour au niveau de ma page HTML, je commence par créer un élément style dans le head de cette page pour y placer mes styles…

Table des matières