L1 Info : Informatique et Document, CSS
 
◃  Ch. 7 CSS 3  ▹
 

Flexible Box Layout (display:flex) logo css 3

  • 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