Le modèle des boites flexibles ou flexbox

Le modèle des boites flexibles ou flexbox

  1. Objectif

    • Connaitre Le Le modèle des boites flexibles ou flexbox en CSS
  2. Présentation

    • Le FlexBox, est un système de mise en pages qui permet une gestion sensiblement identique au block layout, où chaque élément est positionné par rapport à ses éléments frères.
      • l’ordre d’affichage des éléments peut être modifié dynamiquement, aussi bien horizontalement que verticalement ;
      • la taille de chaque bloc peut s’ajuster automatiquement dans l’espace restant, en largeur mais également en hauteur ;
      • il est possible d’aligner des blocs horizontalement ou verticalement, sur la largeur ou sur la hauteur de son parent.
    • Le flexbox est un modèle de disposition très puissant qui permettre de contrôler facilement et avec précision l’alignement, la direction, l’ordre et la taille des éléments (ou plus précisément des boites).
    • Un Flexbox est une boîte conteneur le flex container qui contient d’autres boîtes les flex items.
    • La répartition des flex items se fait selon deux axes : l’axe principal et l’axe secondaire. Par défaut l’axe principal est horizontal et la distribution des flex items se fait de la gauche vers la droite. L’axe secondaire est toujours à angle droit avec l’axe principal et la distribution se fait du haut vers le bas.



  3. flex container et flex items

    • Pour commencer à utiliser le modèle Flexbox, vous devez d’abord définir un conteneur Flex.
    • L’élément ci-dessus représente un conteneur flexible ou flex container (la zone bleue) avec cinq éléments flexibles ou flesx items.
    • Exemple:
      <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      </div>

  4. Les propriétés du conteneur flex

    • Les propriétés du conteneur flex sont les suivantes:
      • flex direction
      • flex-wrap
      • flex-flow
      • justifier le contenu
      • align-items
      • aligner le contenu
      1. La propriété flex-direction
        • La propriété flex-direction définit la direction dans laquelle le conteneur veut empiler les éléments flexibles.
        • La propriétéflex-direction permettre de définir quel va être l’axe principal pour un conteneur flexible et ses éléments flexibles ainsi que la direction des éléments le long de cet axe. Le deuxième axe sera ainsi appelé axe secondaire.
        • La propriété de feuille de style flex-direction CSS est applicable sur l’ensemble des balises HTML ou XHTML, si elles sont le conteneur Flexbox Css d’éléments flexibles Css et qu’il soit de type display:[inline-]flex.
        • .container {
          flex-direction: row | row-reverse | column | column-reverse;
          }

          Le modèle des boites flexibles ou flexbox
          Source:https://www.zonecss.fr/proprietes-css/flex-direction-css.html

        • Avec:
          • row(par défaut): de gauche à droite dans ltr; de droite à gauchertl
          • row-reverse: droite à gauche dans ltr; de gauche à droite dansrtl
          • column: idem rowmais de haut en bas
          • column-reverse: idem row-reversemais de bas en haut
        • Exemple:
          • Le modèle des boites flexibles ou flexbox

      2. La propriété flex-wrap



Abonnez vous à notre chaîne YouTube gratuitement