• Grille responsive [flexbox] : le container

    Les flexbox vous permettent, si votre html est structuré correctement, de créer des grilles responsive (qui s'adapte à la taille de l'écran de l'utilisateur) très rapidement.

    Pour commencer, la structure de votre HTML doit être la suivante :

    <div class="flexContainer">
       <div class="colonne">CONTENU</div>
       <div class="colonne">CONTENU UN PEU PLUS LONG</div>
       <div class="colonne">CONTENU TREEEEEEEEES TREEEEEEES LONG...</div>
    </div>

    Dans votre CSS ajoutez simplement :

    .flexContainer {
          display : flex;
    }

    Le résultat est le suivant : 3 colonne côte à côte dont la taille s'adapte à son contenu

    CONTENU
    CONTENU UN PEU PLUS LONG
    CONTENU TREEEEEEEEES TREEEEEEES LONG...

    Vous pouvez modifier ce comportement par défaut en CSS en ajoutant la propriété "flex-direction"

    .flexContainer {
          display : flex;
          flex-direction : row-reverse;
    }

    Dans cet exemple la valeur "row-reverse" place mes colonnes à l'envers

    CONTENU
    CONTENU UN PEU PLUS LONG
    CONTENU TREEEEEEEEES TREEEEEEES LONG...

    Toutes les valeurs de "flex-direction":
    • "row" : comportement par défaut, les colonnes sont alignées horizontalement dans le bon sens
    • "row-reverse" : les colonnes sont alignées horizontalement dans le sens inverse
    • "column" : les colonnes sont placées les unes en dessous des autres
    • "column-reverse" : les colonnes sont placées les unes en dessous des autres dans le sens inverse

    Disons maintenant que je spécifie une largeur à mes colonnes

    .colonne {
          width : 300px;
    }

    Mes colonnes sont automatiquement redimensionnées pour qu'elles tiennent toutes alignées dans leur container

    CONTENU
    CONTENU
    CONTENU

    On peu cependant forcer une taille défini aux colonnes en ajoutant la propriété "flex-wrap" au flexContainer

    .flexContainer {
          display : flex;
          flex-wrap : wrap;
    }

    CONTENU
    CONTENU
    CONTENU

    Pour déterminer l'allignement de vos colonnes dans le container, utilisez la propriété "justify-content"

    .flexContainer {
          display : flex;
          justify-content : center;
    }

    CONTENU
    CONTENU
    CONTENU

    Les autres valeurs de cette propriété sont :
    • "flex-start" : valeur par défaut, aligné à gauche
    • "flex-end" : aligné à droite
    • "center" : aligné au center
    • "space-around" : prend tout l'espace en conservant des marges à gauche et à droite

    CONTENU
    CONTENU
    CONTENU

    • "space-between" : prend tout l'espace sans conserver de marge

    CONTENU
    CONTENU
    CONTENU

    Si j'augmente la hauteur du container, les colonnes s'adaptent pour occuper tout l'espace

    CONTENU
    CONTENU
    CONTENU

    Il es possible de changer ce comportement avec la propriété "align-items"

    .flexContainer {
          display : flex;
          align-items : center;
          height : 150px;
    }

    CONTENU
    CONTENU
    CONTENU

    Les autres valeurs possibles sont :
    • "stretch" : valeur par défaut, les colonnes occupent toute la hauteur disponible
    • "flex-start" : collé en haut du container
    • "flex-end" : collé en bas du container
    • "center" : centré verticalement dans le container

    Suite de l'article : les propriétés des colonnes (en cours d'écriture)

  • Commentaires

    1
    Vendredi 21 Septembre 2018 à 14:42

    merci pour ce partage

    amitié 

     

    2
    Dimanche 30 Septembre 2018 à 22:24

    J'ai étudié le flex dans mon DUT et je me suis toujours dit qu'on ne pouvait pas l'appliquer à EklaBlog pour rendre un blog responsive ... Du coup c'est une grande surprise que l'on puisse tout de même l'utiliser, au moins pour le contenu x)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :