flex-direction not working in nested flexbox grid

Question

I would like to create a grid using flexbox that responds to various screen sizes. On mobile in portrait orientation, I would like for the grid to be one column only. As for mobile in landscape, I would like the grid to turn to two columns and have the grid maintain the same order as it did in one column. For desktop, the grid should become three rows with three columns in each of them.

As of now, when in the two column layout, there is a empty space that is created after each set of three flexboxes. I would like for the next flexbox to fill that space and was hoping someone could help me in achieving this.

Here is a screen capture of what I am replicating (desktop):

code

    /* CSS Styles for the revised "Our */

/* Extra small devices (phones, less than 768px) */

.work__container {
   height: auto;
   display: flex;
   flex-direction: column;
}

.work__flex {
   width: 100vw;
   height: auto;
   display: flex;
   flex-direction: column;
}

.work__flex--item {
   width: 100vw;
   height: 100vw;
}

/* Mobile in landscape orientation */
@media (max-width: 767px) and (orientation: landscape) {
   
.work__flex {
   flex-direction: row;
   flex-wrap: wrap;
}
   
.work__flex--item {
   width: 50vw;
   height: 50vw;
}
  
    
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

.work__flex {
   flex-direction: row;
   flex-wrap: wrap;
}
   
.work__flex--item {
   width: 50vw;
   height: 50vw;
}    
    
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

.work__flex {
   flex-direction: row;
}

.work__flex--item {
   width: 33.33vw;
   height: 33.33vw;
}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

 

}

<div class="work__container">
  <div class="work__flex">
    <div class="work__flex--item one">
    </div>
    <div class="work__flex--item two">
    </div>
    <div class="work__flex--item three">
    </div>
  </div>
  <div class="work__flex">
    <div class="work__flex--item one">
    </div>
    <div class="work__flex--item two">
    </div>
    <div class="work__flex--item three">
    </div>
  </div>
  <div class="work__flex">
    <div class="work__flex--item one">
    </div>
    <div class="work__flex--item two">
    </div>
    <div class="work__flex--item three">
    </div>
  </div>
</div>

Answer 1

In your code, .work__container is a flex container. It has display: flex.

But .work__flex is not a flex container. It doesn't have display: flex or display: inline-flex.

Therefore, flex-direction, which only applies to flex containers, is being ignored in .work__flex. For the same reason, flex-wrap is also being ignored in .work__flex.

Here's a more complete explanation: Proper use of flex properties when nesting flex containers