Html 柔性方向在嵌套的flexbox网格中不起作用

我想使用flexbox创建一个网格，以响应各种屏幕大小。在纵向移动中，我希望网格仅为一列。至于景观中的移动，我希望网格变成两列，并让网格保持与一列中相同的顺序。对于桌面，网格应该变成三行，每行三列

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

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

代码

/*修订版“我们的*/
/*超小型设备（电话，小于768px）*/
.工作容器{
高度：自动；
显示器：flex；
弯曲方向：立柱；
}
.工作弹性{
宽度：100vw；
高度：自动；
显示器：flex；
弯曲方向：立柱；
}
.work\uu flex--项目{
宽度：100vw；
高度：100vw；
}
.amur{背景色：#F0E5D3；}
.pop鞋{背景色：#F59390；}
喜欢你的亚麻制品{背景色：#DADADA；}
.bench{背景色：#b3；}
.dogpack{背景色：359DB6；}
.烟雾表演{背景色：#426449；}
.roman coffee co{背景色：9A7D2F；}
.protech{背景色：#E2342D；}
.northstone{背景色：#363636；}
/*横向移动*/
@介质（最大宽度：767px）和（方向：横向）{
.工作弹性{
弯曲方向：行；
柔性包装：包装；
}
.work\uu flex--项目{
宽度：50vw；
高度：50vw；
}
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）{
.工作弹性{
弯曲方向：行；
柔性包装：包装；
}
.work\uu flex--项目{
宽度：50vw；
高度：50vw；
}    
}
/*中型设备（台式机、992px及以上）*/
@介质（最小宽度：992px）{
.工作弹性{
弯曲方向：行；
}
.work\uu flex--项目{
宽度：33.33vw；
身高：33.33vw；
}
}
/*大型设备（大型台式机，1200像素及以上）*/
@介质（最小宽度：1200px）{
}

---

在您的代码中，

.work\u container

是一个flex容器。它具有

显示：flex

但是

.work\uu flex

不是flex容器。它没有

display:flex

或

display:inline flex

因此，

flex-direction

（仅适用于flex容器）在

.work\uu-flex

中被忽略。出于同样的原因，

flex-wrap

在

.work\uu-flex

中也被忽略

这里有一个更完整的解释：

/*超小型设备（电话，小于768px）*/
.工作弹性{
高度：自动；
显示器：flex；
弯曲方向：立柱；
保证金：2倍；
}
.工作弹性{
宽度：100vw；
高度：自动；
弯曲方向：立柱；
}
.work\uu flex--项目{
宽度：100vw；
高度：100vw；
}
.一{
背景颜色：蓝色；
}
.二{
背景色：红色；
}
.三{
背景颜色：黄色；
}
/*横向移动*/
@介质（最大宽度：767px）和（方向：横向）{
.工作弹性{
弯曲方向：行；
柔性包装：包装；
}
.work\uu flex--项目{
宽度：50vw；
高度：50vw；
}
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）{}
/*中型设备（台式机、992px及以上）*/
@介质（最小宽度：992px）{
.工作弹性{
弯曲方向：行；
}
.work\uu flex--项目{
宽度：33.33vw；
身高：33.33vw；
}
}
/*大型设备（大型台式机，1200像素及以上）*/
@介质（最小宽度：1200px）{}

---

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

HTML:

---

完全是我的疏忽。非常感谢你指出这一点。@Michael_B

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



}