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 : .. code-block:: css 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) .. seealso:: * `la propriété display sur le MDN `_ 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. .. code-block:: css 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 } .. seealso:: * `la propriété flex-direction sur le MDN `_ 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é… .. figure:: images/justify-content.svg :alt: illustration des différents modes de distribution :align: center © css-tricks.com .. code-block:: css 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 } .. seealso:: * `la propriété justify-content sur le MDN `_ 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é… .. figure:: images/align-items.svg :alt: illustration des différents modes de distribution :align: center © css-tricks.com .. code-block:: css selecteur-conteneur { justify-content : flex-start; justify-content : flex-end; justify-content : center ; justify-content : baseline; justify-content : stretch; } .. seealso:: * `la propriété align-items sur le MDN `_ 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.