display : flex, flex-direction, justify-content et align-items¶
Note
Toutes les propriétés présentées ici s’appliquent aux conteneurs flexbox, mais pas aux items flexbox.
propriété display¶
Pour transformer un élément en conteneur flexbox, et les éléments qu’il contient en items flexbox, il est nécessaire de lui appliquer la propriété display avec la valeur flex, ce qui donne la déclaration suivante :
selecteur-conteneur {
display: flex;
}
implications¶
- l’élément ciblé devient un conteneur flexbox
- les éléments contenus deviennent des items flexbox
- ces différents éléments se voient appliquer des propriétés et valeurs par défaut
- le conteneur flexbox est défini par un axe principal, (vertical ou horizontal – par défaut –), et secondaire (si l’axe principal est horizontal, alors l’axe secondaire est vertical, et inversement)
Voir aussi
exercice¶
Rendez-vous sur cette page et utilisez les propriétés display sur l’élément avec la classe conteneur. Conservez la page ouverte pour la suite.
propriété flex-direction¶
La propriété flex-direction permet de choisir la direction du conteneur flex.
selecteur-conteneur {
flex-direction: row; // horizontal ltr (left-to-right) si document ltr
flex-direction: row-reverse; // horizontal rtl (right-to-left) si document ltr
flex-direction: column; // de haut en bas
flex-direction: column-reverse; // de bas en haut
}
Voir aussi
exercice¶
Poursuivez le travail du précédent exercice en appliquant la propriété flex-direction sur l’élément avec la classe conteneur, et en testant les différentes valeurs possibles.
propriété justify-content¶
La propriété justify-content permet de définir la distribution le long de l’axe principal en cas d’espace disponible : début de l’axe, fin de l’axe, centré, distribué…
© css-tricks.com
selecteur-conteneur {
justify-content: flex-start; // placé en début d'axe
justify-content: flex-end; // placé en fin d'axe
justify-content: center; // centré
justify-content: space-between; // mode de distribution 1
justify-content: space-around; // mode de distribution 2
justify-content: space-evenly; // mode de distribution 3
}
Voir aussi
exercice¶
Poursuivez le travail du précédent exercice en appliquant la propriété justify-content sur l’élément avec la classe conteneur, et en testant les différentes valeurs possibles.
propriété align-items¶
La propriété align-items permet de définir la distribution le long de l’axe secondaire en cas d’espace disponible, lorsque le contenu consiste en une unique ligne de contenu : début de l’axe, fin de l’axe, centré, distribué…
© css-tricks.com
selecteur-conteneur {
justify-content : flex-start;
justify-content : flex-end;
justify-content : center ;
justify-content : baseline;
justify-content : stretch;
}
Voir aussi
exercice¶
Poursuivez le travail du précédent exercice en appliquant la propriété align-items sur l’élément avec la classe conteneur, et en testant les différentes valeurs possibles.