Responsive via FlexBox

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Responsive via FlexBox

Re: Responsive via FlexBox

par Saian » 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%;
  }
}

Responsive via FlexBox

par zlepoizon » 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>