flex-direction在嵌套的flexbox网格中不起作用

Question

我想使用flexbox创建一个响应各种屏幕尺寸的网格。在纵向移动设备上，我希望网格只有一列。至于横向移动，我希望网格转向两列并使网格保持与一列中相同的顺序。对于桌面，网格应该变为三行，每行三列。

截至目前，在两列布局中，在每组三个flexbox之后创建一个空白空间。我希望下一个flexbox能填补这个空间，并希望有人能帮助我实现这个目标。

以下是我正在复制的内容的屏幕截图（桌面）：

码

＆＃13;

＆＃13;

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

.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;}

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

 

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的代码中，.work__container是一个灵活容器。它有display: flex。

但.work__flex 不是一个灵活容器。它没有display: flex或display: inline-flex。

因此，在flex-direction中忽略了仅适用于Flex容器的.work__flex。出于同样的原因，flex-wrap中也忽略了.work__flex。

以下是一个更完整的解释：Proper use of flex properties when nesting flex containers

Answer 2

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

Answer 3

这可能是一个非传统的解决方案，但我添加了一个副本，需要移动到默认隐藏的容器上方。当布局分为两列时，它会显示隐藏的列并隐藏原始框。问题解决了。

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



}