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.

Spécifier la taille d'un élément flex

Spécifier la taille d'un élément flex - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

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

Spécifier la taille d'un élément flex

“

Parlons maintenant de la taille de nos éléments flex. J'ai ici un flex container avec deux flex items à l'intérieur. Au niveau du code, je n'ai que des valeurs par défaut. Flex-direction: row, c'est la valeur par défaut. Flex-wrap: nowrap, c'est également la valeur par défaut. Au niveau de la largeur de ces éléments, ils ont par défaut la largeur que leur impose leur contenu. Donc, l'élément Deux est un peu plus large que l'élément Un, tout simplement parce que le mot Deux est un peu plus large que le mot Un, il y a plus de lettres dans Deux que dans Un. Au niveau de la hauteur, rappelez-vous que par défaut, ces éléments sont étirés en hauteur, donc ils ont la même hauteur que leur flex container. Si je veux spécifier une largeur pour ces éléments, je vais devoir créer un style CSS pour l'élément li, et j'utilise notre bonne vieille propriété width pour spécifier par exemple une largeur de 300 pixels. Quand je reviens dans mon document et que je rafraîchis ma page, ces deux éléments…

Table des matières