Rendre flexible 3 blocs avec flex

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Rendre flexible 3 blocs avec flex

    Salut

    J'ai 3 blocs que je veux mettre sur une ligne et qu'en responsive, suivant la largeur, que le 2° et le 3° puissent passer à la ligne, et prenne toute la largeur. J'ai utilisé flex-wrap:wrap; pour autoriser les éléments à passer à la ligne. Mais ça ne marche pas, les blocs reste l'un à coté de l'autre. Comme je suis en local j'ai mis le code dans codepen.

  • #2
    Il manque le comportement en petite largeur. Il faut ajouter ce css
    Code:
    @media screen and (max-width:480px) {
      .block-01,
    .block-02,
    .block-03 {
      width:100%;
    }
    }
    aime ceci.
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Je pensais qu'avec flex que c'etait possible de le rendre responsive sans utiliser un media. Car après avoir finis le site je vais mettre en place le responsive.

      Merci pour ta réponse.

      Commentaire


      • #4
        salut, j'arrive un peu tard mais tu peux faire
        .block-01,
        .block-02,
        .block-03 {
        width:31%;
        flex: 1 1 auto;
        background-color:#03bc1c;
        padding:5px;
        min-width: 300px;
        }
        en ajoutant le min-width ça va forcer les blocs à se mettre les uns sous les autres. APrès tu peux ajouter du space-between et enlever les marges par exemple pour avoir quelque chose de mieux
        CEd
        aime ceci.
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Merci ced1870.

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X