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

Question

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

到目前为止，在两列布局中，每组三个弹性框后面都会创建一个空白空间。我希望下一个 Flexbox 能够填补这个空间，并希望有人能帮助我实现这一目标。

这是我正在复制的屏幕截图（桌面）：

代码

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

在你的代码中，.work__container是一个弹性容器。它有display: flex。

但.work__flex不是弹性容器。它没有display: flex或display: inline-flex。

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

这是更完整的解释：嵌套 Flex 容器时正确使用 Flex 属性