Responsive via FlexBox

Eléphanteau du PHP | 22 Messages

19 févr. 2020, 12:59

Bonjour à tous, question CSS sous flexbox. (je dois pas utiliser Bootstrap, grid) mais flexbox. Ma question. Je veux rendre responsive (j'utilie les médias Queries) une page. J'ai un div container en display : flex. Dans ce div j'ai 3 Divs en %. 33 chacun. Je veux en résolution 800% de mon écran faire passer mon 3ème Div à la ligne. Comment procédez-vous ? (Donc 2 DIV première ligne à 50% et le troisième à gauche à la ligne 50%).
J'ai laissé flex:1 mais ça marche de toute façon pas.
Merci si vous savez m'aider.


.box
{
display: flex;
}

.one {
flex: 1;
background-color: brown;
}
.two {
flex: 1;
background-color: red;
}

.three {
flex: 1;
background-color: green;
}

HTML :

<div class="box">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three à la ligne quand 800px</div>
</div>

Avatar du membre
Mammouth du PHP | 1258 Messages

19 févr. 2020, 13:36

Salut, http://www.cssdesk.com/SrG3K
.box
{
  display: flex;
  flex-wrap: wrap;
}

.box div {
  width: 33.33%;
}

.one {
  background-color: brown;
}
.two {
  background-color: red;
}

.three {
  background-color: green;
}

@media (max-width: 800px) {
  .box div {
    width: 50%;
  }
}
J'édite souvent mon message après avoir répondu pour le corriger où y apporter des informations complémentaires alors n'hésitez pas à y jeter un nouveau coup d'oeil ^^