Using flex to display content as row or column depending on window size

Question

Is it possible to display items as columns or rows depending on the window size? Like this: desired-result

I want to imitate the image. The blue items are in their own div. Right now, when the window is resized the blue items move to the next line as columns.

Here is the CSS code:

 .mainRedContainer{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5px;
  margin-bottom: 20px;
}

.orangeContainer{
padding: 10px;
height: 43vh;
margin-top: 20px;
background-color: #dee8f0;
}

.blueContainer{
  margin-top:20px;
  display: flex;
  flex-flow: column wrap;
}

.blueItems{
  min-width: 15vw;
  max-width: 17.5vw;
  max-height: 250px;
  background-color: rgb(195, 220, 236);
  margin-left: 10px;
  margin-right: 10px;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Check out this article. — Anglesvar, Aug 19 '20 at 19:14
Does this answer your question? [How to use particular CSS styles based on screen size / device](https://stackoverflow.com/questions/21075983/how-to-use-particular-css-styles-based-on-screen-size-device) or [Switching CSS classes based on screen size](https://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size). — showdev, Aug 19 '20 at 21:19

score 1 · Answer 1 · answered Aug 19 '20 at 19:10

1

Its actually pretty simple. You have to use @media in these situations. For instance, you want it to change for when the size is smaller than 576px. then:

@media (max-width: 576px) { 
  .mainRedContainer{
   flex-direction: column;
   }
    
  .blueContainer{
   flex-flow: row wrap;
   }
 }

answered Aug 19 '20 at 19:10

Amin Darian

177
2
11

1

This ```@media (max-width: SIZEpx)``` + ```.myclass{flex-direction: column;}``` did the trick to me. thanks – TroniPM Dec 07 '22 at 02:23

score 0 · Answer 2 · answered Aug 19 '20 at 19:46

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;;
}

body {
  padding: 10px;
  border: 1px solid red;
}


.wrapper {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-template-rows: auto;
  gap: 2rem;
}


.orangeContainer .orangeItem {
  background-color: orange;
  min-height: 200px;
  height: 100%;
}

.blueContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
}

.blueContainer .blueItem {
  background-color: blue;
  height: 200px;
}

@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .blueContainer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="orangeContainer">
      <div class="orangeItem">Item 1</div>
    </div>
    <div class="blueContainer">
      <div class="blueItem">Item 2</div>
      <div class="blueItem">Item 3</div>
    </div>
  </div>
</body>
</html>

A little explanation might be helpful. How does your code solve the problem? — showdev, Aug 19 '20 at 21:16
In general, preferring grid evaluation instead of flexbox when creating this and similar layouts. — Onur Sabanoglu, Aug 20 '20 at 06:22

Using flex to display content as row or column depending on window size

2 Answers2