Html CSS灵活的行方向和50%的列拉伸

我正在努力学习CSS flex是如何工作的。我想用一些块（项目）创建一个全宽全高面板。我不明白当“弯曲方向”为“行”（图像上的粉红色和黄色块）时，如何创建两个高度各为50%的垂直项目

我的目标是：

以下是我现在得到的：

这是我的代码：

正文{
最小高度：100vh；
}
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
填充物：5px；
}
.容器.物品
{    
利润率：10px；
}
.蓝色{
弹性：0180%；
背景：蓝色；
}
.item.green{
flex:01自动；
背景：绿色；
}
.item.red{
弹性：01.60%；
背景：红色；
}
.项目.粉红色{
弹性：10自动；
背景：粉红色；
自我调整：伸展；
}
.橙色{
弹性：01.60%；
背景：橙色；
}
.项目.黄色{
弹性：10自动；
自对准：居中；
背景：黄色；
}
.紫色{
弹性：10自动；
背景：紫色；
}

蓝色
绿色
红色
粉红色
橙色
黄的
紫色

我建议尝试创建一个网格，通过创建row类和col类，可以很容易地放置这些div。 像这样的

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 100%;
}

---

并安排您的div

而不是尝试用一个长的、换行的flex行来完成所有这些，您可以添加额外的行和列换行器，并且仍然使用flex的优点。这样，您就不会偶尔使用自对齐属性或难以维护的东西，html在语义上更像布局

.row{
显示器：flex；
弯曲方向：行；
}
.栏目{
最小高度：100px；
弹性：01 50%；
显示器：flex；
弯曲方向：立柱；
}
.列：第n个类型（1）{
弹性：01.60%；
}
.列：第n个类型（2）{
flex:1自动；
}
.项目{
最小高度：30px；
边界半径：5px；
保证金：5px；
}
.蓝色{
弹性：0180%；
背景：蓝色；
}
.item.green{
flex:1自动；
背景：绿色；
}
.item.red{
弹性：01.20%；
背景：红色；
}
.橙色{
弹性：10自动；
背景：橙色；
}
.项目.粉红色{
弹性：10自动；
背景：粉红色；
}
.项目.黄色{
弹性：10自动；
背景：黄色；
}
.紫色{
弹性：10自动；
背景：紫色；
}

蓝色
绿色
红色
粉红色
橙色
黄的
紫色

在这里使用CSS网格可能会更幸运，但如果在堆叠的项目周围添加更多的包装器，这是非常简单的。我开始使用网格，我了解到flex性能优于网格。是吗？是的，但它的威力要大得多。如果您需要在多个断点中以复杂的方式配置大量元素，那么网格是一个不错的选择。网格的唯一问题是并非所有浏览器都支持它（Internet Explorer），但浏览器很快就会消亡。因此，我建议您将网格用于二维结构，将flex用于1d结构（例如页眉导航或页脚导航）。internet explorer需要前缀，并为每个元素在网格中指定位置。（网格行/网格列）但实际上，对于自动流，网格和IE不起作用。这个布局看起来像一个典型的网格布局，因为您有跨越行（或列）的元素，这是flex所没有的。