Good afternoon, I have 3 flex containers in them with 3 flex items, the question is how to make it so that when you open a page on a small screen, they do not just go one after the other but become in a column by the semantic type all the first items under the first ones are the second ones under the second ones and so on .

 <div class =flex-container> <div class flexitem flexitem-1></div> <div class flexitem flexitem-2></div> <div class flexitem flexitem-3></div> </div> <div class =flex-container> <div class flexitem flexitem-1></div> <div class flexitem flexitem-2></div> <div class flexitem flexitem-3></div> </div> <div class =flex-container> <div class flexitem flexitem-1></div> <div class flexitem flexitem-2></div> <div class flexitem flexitem-3></div> </div> .flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  • better draw expected results - NeedHate

1 answer 1

Jsfiddle solution

Pay attention to how the html classes are written to the elements, they are not written correctly in your hands.

 .flexitem { border: solid 1px grey; text-align: center; padding: 10px 0; width: 30%; } .flexitem-1 { background: lightpink; } .flexitem-2 { background: lightgreen; } .flexitem-3 { background: lightblue; } .flex-container { display: flex; flex-flow: row wrap; justify-content: space-between; } 
 <div class="flex-container"> <div class="flexitem flexitem-1">1</div> <div class="flexitem flexitem-2">2</div> <div class="flexitem flexitem-3">3</div> </div> <div class="flex-container"> <div class="flexitem flexitem-1">1</div> <div class="flexitem flexitem-2">2</div> <div class="flexitem flexitem-3">3</div> </div> <div class="flex-container"> <div class="flexitem flexitem-1">1</div> <div class="flexitem flexitem-2">2</div> <div class="flexitem flexitem-3">3</div> </div>