flex-wrap et align-content
##########################

.. note::

   Toutes les propriétés présentées ici s'appliquent aux **conteneurs flexbox**, mais pas aux **items flexbox**.

flex-wrap
*********

La propriété ``flex-wrap`` permet, lorsque la place à l'horizontal vient à manquer, de placer les contenus à la ligne plutôt que de forcer leur largeur pour les faire rentrer.

.. figure:: ../images/flex-wrap.svg
   :alt: illustration de la propriété flex-wrap
   :align: center

   © css-tricks.com

.. code-block:: css

   selecteur-conteneur {
      flex-wrap: wrap;
      flex-wrap: wrap-reverse;
   }

.. seealso::

   * `la propriété flex-wrap sur le MDN <https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap>`_

exercice
========

Poursuivez le travail du précédent exercice en associant :

* aux éléments de classe contenu une déclaration associant la propriété « width » et la valeur « 50% »
* à l'élément de classe contenant une déclaration associant la propriété « flex-wrap » et la valeur « wrap »

.. note::

   Observez que les éléments ne font, avant d'appliquer la propriété flex-wrap, pas 50% de la taille du conteneur en largeur, mais se partagent l'espace. L'application de la propriété flex-wrap change cela et permet de distribuer le contenu sur plusieurs lignes.

align-content
*************

Lorsque la propriété flex-wrap est utilisée pour permettre de distribuer le contenu sur plusieurs lignes, il ne fait plus sens d'utiliser align-items qui concerne une répartition en une ligne.

align-content va permettre de définir la distribution des différentes lignes le long de l'axe secondaire en cas d'espace disponible : début de l'axe, fin de l'axe, centré, distribué…

.. figure:: ../images/align-content.svg
   :alt: illustration de la propriété align-content
   :align: center

   © css-tricks.com

.. code-block:: css

   selecteur-conteneur {
      align-content: center;     /* Les éléments sont groupés au centre */
      align-content: start;      /* Les éléments sont groupés au début  */
      align-content: end;        /* Les éléments sont groupés à la fin */
      align-content: flex-start; /* Les éléments flexibles sont groupés au début */
      align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
   }

.. seealso::

   * `la propriété align-content sur le MDN <https://developer.mozilla.org/fr/docs/Web/CSS/align-content>`_

exercice
========

Poursuivez le travail du précédent exercice en appliquant la propriété align-content sur l'élément avec la classe conteneur, et en testant les différentes valeurs possibles.