Javascript 使flex项目在移除同级时自动重新调整大小以填充空间

我有四个灵活的盒子，我想关闭，并有其他自动调整大小，以适应新的空白空间

我认为我的CSS有一些简单的错误，因为当前关闭按钮关闭每个框

你能指出我哪里出错了吗

#分隔符{
宽度：20%；
}
#第一箱{
宽度：20%；
右边填充：10px；
边框：2件纯黑；
左侧填充：10px；
保证金权利：4px；
柔性生长：1；
弹性收缩：1；
}
#第二箱{
宽度：20%；
右边填充：10px；
边框：2件纯黑；
左侧填充：10px；
保证金权利：4px；
柔性生长：1；
弹性收缩：1；
}
#第三箱{
宽度：20%；
右边填充：10px；
边框：2件纯黑；
左侧填充：10px；
保证金权利：4px；
柔性生长：1；
弹性收缩：1；
}
#第四箱img{
宽度：30%；
身高：30%；
柔性生长：1；
弹性收缩：1；
}

接近
接近
接近

通过赋予flex项

flex grow:1

，它们将各自扩展以消耗可用空间。因此，如果项目被删除，其同级项将自动扩展到该新空间

尝试以下简单方法：

flex容器{
显示：内联flex；
弯曲方向：立柱；
高度：150像素；
}
/*关键规则*/
flex容器>*{flex:1；}
/*flex增长：1，flex收缩：1，flex基础：0*/
/*非基本装饰风格*/
#firstbox{背景色：浅绿色；}
#secondbox{背景色：粉红色；}
#第三盒{背景色：浅绿色；}
flex容器>*{宽度：100px；边框：1px黑色虚线；文本对齐：中心；}

关闭盒子#1
关闭盒子#2
关闭方框#3