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

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

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.

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

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é.

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%;
  }
}

1000 Merci !!! ça fonctionne