Flexible Box Layout (display:flex)

• Ce module CSS définit un environnement très souple pour configurer l'affichage d'une page.
• Principe : un container (élément HTML) associé à la propriété display: flex (ou display: inline-flex) aura des enfants (appelés flex items) associés à une taille auto-adaptable.
• Le container est associé à un axe principal (propriété flex-direction) qui indique le sens d'empilement des items contenus dans la flexbox (valeur parmi row, row-reverse, column et column-reverse).
• Par défaut, la taille des flex items est ajustée au mieux.
• Exemples :
  • Application au code HTML suivant :

    <div class="maFlexbox">
    <div>Un</div>
    <div>Deux</div>
    <div>Trois</div>
    <div>Quatre</div>
    <div>Cinquième item</div>
    </div>
    

  • Code css :

    .maFlexbox {
    display: flex;
    flex-direction : row;
    width: 450px
    }
    

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css :

    .maFlexbox {
    display: flex;
    flex-direction : column-reverse;
    width: 450px
    }
    

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
• Par défaut, une seule ligne (ou une seule colonne) est utilisée pour afficher le contenu d'un container flexible.
• La propriété flex-wrap permet de modifier ce comportement (valeur parmi no-wrap, wrap et wrap-reverse).
  • Code css :

    .maFlexbox {
    display: flex;
    width: 450px
    }
    

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    width : 100px;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css :

    .maFlexbox {
    display: flex;
    width: 450px;
    flex-wrap : wrap;
    }
    

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    width : 100px;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
• Gestion de la taille des flex-items : les propriétés flex-basis, flex-grow et flex-shrink permettent de définir respectivement :
  • la taille par défaut d'un flex-item (attribuée s'il y a suffisamment d'espace dans le container),
  • le coefficient d'extension du flex-item (exprimé avec une valeur entière) pour occuper la totalité de l'espace disponible dans le container,
  • la coefficient de rétrécissement du flex-item (exprimé avec une valeur entière) pour s'adapter à la taille du container lorsqu'il est trop petit.
  • Code css (répartition uniforme de l'espace disponible) :

    .maFlexbox {
    display: flex;
    width: 450px
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-grow : 1;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css (triple dose pour le premier item) :

    .maFlexbox {
    display: flex;
    width: 450px
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-grow : 1;
    }
    .maFlexBox > div.item1{
    flex-grow : 3;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • flex-shrink agit de la même façon en attribuant un coefficient de rétrécissement aux flex-items ciblés
  • Code css (répartition uniforme du rétrécissement) :

    .maFlexbox {
    display: flex;
    width: 450px
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-basis : 100px;
    flex-shrink : 1;
    }
    

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css (triple dose pour le premier item) :

    .maFlexbox {
    display: flex;
    width: 450px
    }
    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-basis : 100px;
    }

    
    .maFlexBox > div.item1{
    flex-shrink : 15;
    }
    .maFlexBox > div.item2-4{
    flex-shrink : 5;
    }

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
• Gestion de l'alignement des flex-items : les propriétés align-item et justify-content permettent de définir respectivement :
  • l'alignement des items selon le cross-axe (la verticale pour les lignes), accepte une valeur parmi
    stretch, flex-start, flex-end et center ;
  • l'alignement des items selon l'axe principal (main-axe), accepte une valeur parmi
    flex-start, flex-end, center, space-around, space-between et space-evenly.
  • Code css :

    .maFlexbox {
    display: flex;
    height: 150px;
    width: 450px;
    align-items : center;
    border : red solid thin;
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-basis : 100px;
    height: 60px;
    }

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css :

    .maFlexbox {
    display: flex;
    height: 150px;
    width: 450px;
    justify-content : space-evenly;
    border : red solid thin;
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-basis : 100px;
    height: 60px;
    }

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Code css :

    .maFlexbox {
    display: flex;
    height: 150px;
    width: 450px;
    align-items : center;
    justify-content : space-evenly;
    border : red solid thin;
    }

    .maFlexBox > div{
    border-radius: 5px;
    border: mediumblue thin solid;
    flex-basis : 100px;
    height: 60px;
    }

  • Résultat :
    Un

    Deux

    Trois

    Quatre

    Cinquième item
  • Pour en savoir plus