Html 使用flex box时如何删除默认空间？

html，正文{
身高：100%；
宽度：100%；
}
#父容器{
显示器：flex；
宽度：100%；
身高：100%；
/*弯曲方向：立柱*/
柔性包装：包装；
/*证明内容：之间的空间*/
}
#rd盒{
宽度：100%；
背景色：rgba（176,39,39,1）；
身高：25%；
}
#天空盒{
身高：50%；
背景色：rgba（0255255,1）；
}
#yllw箱{
身高：25%；
背景色：rgba（255242,0,1）；
}
#grn盒{
身高：37.5%；
背景色：rgba（0255,0,1）；
}
#bl盒{
身高：37.5%；
背景色：rgba（0,33,87,1）；
}
#项目：第n个孩子（3）{
顺序：2；
}
/*---常见风格----*/
.wd一半{
宽度：50%！重要；
}
.项目{
保证金：0px！重要；
}

---

您需要为此更改标记

我可以通过如下操作来实现

html，
身体{
身高：100%；
宽度：100%；
}
.parentcontainer{
身高：100%；
宽度：100%；
}
.第二{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
#rd盒{
背景色：rgba（176,39,39,1）；
身高：25%；
}
#天空盒{
宽度：50%；
身高：50%；
背景色：rgba（0,255,255,1）；
}
#grn盒{
宽度：50%；
身高：37.5%；
背景色：rgba（0,255,0,1）；
}
#yllw箱{
宽度：50%；
身高：25%；
背景色：rgba（255,242,0,1）；
}
#bl盒{
宽度：50%；
身高：37.5%；
背景色：rgba（0,33,87,1）；
}

---

您需要为此更改标记

我可以通过如下操作来实现

html，
身体{
身高：100%；
宽度：100%；
}
.parentcontainer{
身高：100%；
宽度：100%；
}
.第二{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
#rd盒{
背景色：rgba（176,39,39,1）；
身高：25%；
}
#天空盒{
宽度：50%；
身高：50%；
背景色：rgba（0,255,255,1）；
}
#grn盒{
宽度：50%；
身高：37.5%；
背景色：rgba（0,255,0,1）；
}
#yllw箱{
宽度：50%；
身高：25%；
背景色：rgba（255,242,0,1）；
}
#bl盒{
宽度：50%；
身高：37.5%；
背景色：rgba（0,33,87,1）；
}

解决方案（使用新的

div.sub-container

）：-

Flexbox沿行或列的一个方向增长。由于您的问题涉及多个方向（第一个div行可实现，其他则列可实现），我用flexbox添加了一个div（

div.sub-container

），并根据

div.sub-container

）更改了高度

html，正文{
身高：100%；
宽度：100%；
溢出：隐藏；
边际：0px；
}
#父容器{
显示器：flex；
宽度：100%；
身高：100%；
柔性包装：包装；
/*证明内容：之间的空间；
弯曲方向：立柱*/
}
#rd盒{
宽度：100%；
背景色：rgba（176,39,39,1）；
身高：25%；
}
#天空盒{
身高：50%；
背景色：rgba（0255255,1）；
}
#yllw箱{
身高：25%；
背景色：rgba（255242,0,1）；
}
#grn盒{
身高：37.5%；
背景色：rgba（0255,0,1）；
}
#bl盒{
身高：37.5%；
背景色：rgba（0,33,87,1）；
}
/*---常见风格----*/
.wd一半{
宽度：50%！重要；
}
.项目{
保证金：0px！重要；
}
.分箱{
身高：75%；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
/*相对于子容器的新计算高度*/
.子容器#天空盒{
身高：66.6667%；
}
.分箱#yllw箱{
身高：33.3333%；
}
.分箱#grn箱{
身高：50%；
}
.分箱#bl箱{
身高：50%；
}

解决方案（使用新的

div.sub-container

）：-

Flexbox沿行或列的一个方向增长。由于您的问题涉及多个方向（第一个div行可实现，其他则列可实现），我用flexbox添加了一个div（

div.sub-container

），并根据

div.sub-container

）更改了高度

html，正文{
身高：100%；
宽度：100%；
溢出：隐藏；
边际：0px；
}
#父容器{
显示器：flex；
宽度：100%；
身高：100%；
柔性包装：包装；
/*证明内容：之间的空间；
弯曲方向：立柱*/
}
#rd盒{
宽度：100%；
背景色：rgba（176,39,39,1）；
身高：25%；
}
#天空盒{
身高：50%；
背景色：rgba（0255255,1）；
}
#yllw箱{
身高：25%；
背景色：rgba（255242,0,1）；
}
#grn盒{
身高：37.5%；
背景色：rgba（0255,0,1）；
}
#bl盒{
身高：37.5%；
背景色：rgba（0,33,87,1）；
}
/*---常见风格----*/
.wd一半{
宽度：50%！重要；
}
.项目{
保证金：0px！重要；
}
.分箱{
身高：75%；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
/*相对于子容器的新计算高度*/
.子容器#天空盒{
身高：66.6667%；
}
.分箱#yllw箱{
身高：33.3333%；
}
.分箱#grn箱{
身高：50%；
}
.分箱#bl箱{
身高：50%；
}

从容器中取出红色的

div id=“rd box”

并取消注释

弹性方向：co
    <div id="rd-box" class="item"></div>
    <div id="parent-container">
        <div id="sky-box" class="item wd-half"></div> 
        <div id="grn-box" class="item wd-half"></div>
        <div id="yllw-box" class="item wd-half"></div>                
        <div id="bl-box" class="item wd-half"></div>
    </div>

    #parent-container {
        display: flex;
        width:100%;
        height: 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }