Css 我正在应用flex属性，但它既不扩展也不收缩

#容器{
高度：800px；
显示器：flex；
文本对齐：居中；
背景颜色：灰色；
调整内容：灵活启动；
调整内容：灵活启动；
}
#容器>分区{
}
#方框-1{
背景颜色：绿色；
高度：100px；
宽度：25%；
}
#方框-2{
背景颜色：黄色；
高度：100px；
宽度：25%；
}
#方框-3{
背景颜色：粉红色；
高度：100px；
宽度：50%；
}
#方框-4{
背景色：浅绿色；
高度：100px；
宽度：50%；}
#方框-5{
背景颜色：蓝色；
高度：100px；
宽度：50%；}
#方框-6{
高度：100px；
背景颜色：巧克力色；
flex:3200px；
宽度：25%；}

1.
2.
3.
4.
5.
6.

我不知道为什么要使用百分比，但我认为只要在所有元素中添加并设置flex属性就可以解决这个问题

#容器{
高度：800px；
显示器：flex；
文本对齐：居中；
背景颜色：灰色；
调整内容：灵活启动；
调整内容：灵活启动；
}
#容器>分区{
}
#方框-1{
背景颜色：绿色；
高度：100px；
弹性：1；
}
#方框-2{
背景颜色：黄色；
高度：100px；
弹性：1；
}
#方框-3{
背景颜色：粉红色；
高度：100px；
弹性：2；
}
#方框-4{
背景色：浅绿色；
高度：100px；
flex:2；}
#方框-5{
背景颜色：蓝色；
高度：100px；
flex:2；}
#方框-6{
高度：100px；
背景颜色：巧克力色；
flex:3 200px}

1.
2.
3.
4.
5.
6.

为什么要使用加起来超过100%的百分比？你说“它什么都不做”，但它确实做了！如果将其删除，则宽度将更改回原来的宽度。那么，你到底想实现什么呢？我以为flexbox会让它成为同一行。我想让它收缩和增长。但现在，即使我重新调整浏览器的大小，它仍然保持在非常小的大小。