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>

score 5 · Accepted Answer · edited May 23 '17 at 10:30

5

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

edited May 23 '17 at 10:30

Community

1
1

answered Mar 10 '17 at 22:28

Michael Benjamin

346,931
104
581
701

1

Complete oversight by me. Thanks so much for pointing that out. @Michael_B – JSON_Derulo Mar 10 '17 at 22:30

Hemant · Answer 2 · 2017-03-10T22:45:07.577

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

.work__flex {
  height: auto;
  display: flex;
  flex-direction: column;
  margin:2px;
}

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

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

.one {
  background-color: blue;
}

.two {
  background-color: red;
}

.three {
  background-color: yellow;
}


/* 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) {}


/* 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>

score 0 · Answer 3 · answered Mar 10 '17 at 23:04

This might be an unconventional solution but I added a duplicate of the boxes that needed to be moved into the containers above them that are hidden by default. When the layout goes into two columns, it shows the hidden ones and hides the original box. Problem solved.

HTML:

<div class="work__container">
        <div class="work__flex">
            <div class="work__flex--item amur">
            </div>
            <div class="work__flex--item pop-shoes">
            </div>
            <div class="work__flex--item love-your-linens">
            </div>
            <div class="work__flex--item bench hidden">
            </div>
        </div>
        <div class="work__flex">
            <div class="work__flex--item bench duplicate">
            </div>
            <div class="work__flex--item dogpack">
            </div>
            <div class="work__flex--item smoke-show">
            </div>
            <div class="work__flex--item roman-coffee-co hidden">
            </div>
            <div class="work__flex--item protech hidden">
            </div>
        </div>
        <div class="work__flex">
            <div class="work__flex--item roman-coffee-co duplicate">
            </div>
            <div class="work__flex--item protech duplicate">
            </div>
            <div class="work__flex--item northstone">
            </div>
        </div>
    </div>

CSS:

/* CSS Styles for the revised "Our Work" page */

/* 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;
}

.amur {background-color: #F0E5D3;}
.pop-shoes {background-color: #F59390;}
.love-your-linens {background-color: #DADADA;}
.bench {background-color: #B3B3B3;}
.dogpack {background-color: #359DB6;}
.smoke-show {background-color: #426449;}
.roman-coffee-co {background-color: #9A7D2F;}
.protech {background-color: #E2342D;}
.northstone {background-color: #363636;}

.hidden {display: none;}

/* 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;
}

.hidden {display: inline !important;}
.duplicate {display: none !important;}

}

/* 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;
}

.hidden {display: inline !important;}
.duplicate {display: none !important;}

}

/* 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) {



}

flex-direction not working in nested flexbox grid

3 Answers3