Partage

[CSS - FLEX] - Problème de responivité

Sujet résolu
12 mars 2018 à 10:24:24

Bonjour,

J'ai mis un site en place et j'ai un petit problème de responsivité. Lorsque je passe en taille d'écran mobile j'aimerais avoir un comportement particulier.

Comme le montre l'image au dessus, j'aimerais que la section du milieu se retrouve en dessous et prenne toute la longueur.

Voila mon code actuel:

.container {
    display: flex;
}

.div {
    flex: 1;
    align-items: center;
}

J'ai essaye plusieurs truc sans succes, le dernier en date:

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

.div {
    flex: 1;
    align-items: center;
}

.div1, .div3 {
    flex-basis: 50%;
}

.div2 {
    flex-basis: 100%;
    order: 3;
}

Malheureusement j'obtiens cela:

Merci d'avance

Methos


Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 mars 2018 à 12:10:03

Bonjour,

je  ne comprend pas bien la question,
donne deux images claires de ce que tu veux STP :

1 la version largeur de viewport normale
2 la version mobile

12 mars 2018 à 12:24:15

Salut,

J'suis pas convaincu que tu utilises flex-basis correctement ici.

Ensuite, tu as juste à définir la taille de tes divs dans tes media-queries pour le responsive, toute la largeur pour la dernière, la moitié pour les deux premières.

12 mars 2018 à 13:45:14

ChrisLebure a écrit:

Bonjour,

je  ne comprend pas bien la question,
donne deux images claires de ce que tu veux STP :

1 la version largeur de viewport normale
2 la version mobile

C'est la première image que j'ai donné: Le haut c'est sur un écran de bureau, le bas c'est le résultat que j'aimerais sur mobile.

MrChampy a écrit:

Salut,

J'suis pas convaincu que tu utilises flex-basis correctement ici.

Ensuite, tu as juste à définir la taille de tes divs dans tes media-queries pour le responsive, toute la largeur pour la dernière, la moitié pour les deux premières.

... Je me suis focalisé sur le flex et j'ai pas pensé a une solution aussi simple ... après je ne sais plus ou j'ai lu que mettre des width lorsque l'on utilisé des flex n'était pas une bonne pratique :s



12 mars 2018 à 14:04:44

Ben quand un container est en display flex il prend toute la largeur en général, mais ce n'est pas juste cette propriété qui va faire ton responsive, sans media-queries ça peut vite devenir compliqué.
12 mars 2018 à 14:37:29

Bonjour,

C'est order:4; qu'il faut mettre et non pas 3 :

Code fonctionnel testable en déplaçant la barre sur: https://jsbin.com/senizak/edit?html,css,output

.container {
    display: flex;
    flex-wrap: wrap;
}
 
.div {
  flex: 1;
  align-items: center;
  border:2px solid brown;
}

.div1 {
  background-color:red;  
  order: 1;
}

.div2 {
  background-color:green;  
  order: 2;
}

.div3 {
  background-color:blue;  
  order: 3;
}

@media all and (max-width:400px){ 
  .div2{
    order:4;
    flex-basis:100%;
  }
}



"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
12 mars 2018 à 15:17:53

1000 Merci !!! ça fonctionne :D

[CSS - FLEX] - Problème de responivité

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown