[Résolu] Mise en page Flex

Bonsoir
Après une après-midi laborieuse passé avec flexbox
je n'ai pas trouvé la solution pour éviter que le texte déborde (div 1).
Je souhaiterais que ces 3 divs soient de largeur identique.
Si vous avez la réponse ou une piste que je dois suivre ?
Merci
https://www.menuiserie-menplast.fr/flex.html
Modifié par africa (20 Oct 2020 - 18:32)

Bonjour,

Tout dépend de ce que tu souhaites exactement concernant la largeur maximun et minimum de chaque blog2.

Par exemple :

    body{margin:0;padding:0;}
    .blog {background-color:aqua;display:flex;justify-content:space-between;}
    .blog2 {background-color:bisque;flex:1;max-width:350px;}
    img{max-width:100%;height:auto;}
    @media only screen and (max-width:800px) {
    	.blog{display:table;margin:0 auto;}
    }

Amicalement,

Bonjour,

Il faut une image plus grande ou égale à la largeur maximum des blog2.

Et après, tu mets une largeur maxi à blog2.

EDIT: et aussi, tu peux mettre les images à width:100% au lieu de max-width:100%;

Une autre version :

    body{margin:0;padding:0;}
    .blog {background-color:aqua;display:flex;justify-content:space-between;}
    .blog2 {display:table;background-color:bisque;flex:1;max-width:400px;}
    img{width:100%;height:auto;}
    @media only screen and (max-width:800px) {
    	.blog{display:table;margin:0 auto;}
    	.blog2{width:100%;}
    }

Amicalement,
Modifié par parsimonhi (20 Oct 2020 - 19:19)

Bonsoir
Merci beaucoup Parsimonhi de partager tes connaissances et ton temps, j’adore ce forum on y apprend beaucoup de choses et on progresse à son rythme
Bien évidement j’ai testé ton travail, super…
Je vais chercher à quoi correspond "display : table" Et essayé de comprendre ton code, il va falloir que je passe du temps sur Flexbox, il y a du boulot
Amicalement