flex-basis, flex-grow, flex-shrink
##################################

.. note::

   Les propriété présentées ici s'applique aux **items flexbox**, mais pas aux **conteneurs flexbox**.

Les propriété flex-basis permet d'indiquer l'encombrement par défaut d'un élément le long de l'axe principal du conteneur flex, avant distribution de l'espace disponible. flex-shrink permet d'indiquer le comportement de l'élément s'il y a moins d'expace disponible que d'espace encombré par les éléments. flex-grow, quant à lui, indique comment l'élément doit s'agrandir si de l'espace est disponible.

flex-basis
**********

.. code-block:: css

   selecteur-item {
      /* On définit une largeur */
      flex-basis: 10em;
      flex-basis: 3px;
      flex-basis: auto;

      /* On utilise les dimensions       */
      /* intrinsèques avec des mots-clés */
      flex-basis: fill;
      flex-basis: max-content;
      flex-basis: min-content;
      flex-basis: fit-content;

      /* La taille se calcule automatiquement */
      /* en fonction du contenu de l'élément  */
      flex-basis: content;
   }

.. seealso::

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

flex-shrink
***********

.. code-block:: css

   selecteur-item {

      flex-shrink: 2;
      flex-shrink: 1;

   }

.. seealso::

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

flex-grow
*********

.. code-block:: css

   selecteur-item {

      flex-grow: 2;
      flex-grow: 1;

   }

.. seealso::

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

.

exercice
========

Continuez le travail précédent et testez la propriété flex-grow sur l'élément possédant la classe « grow ».