Html 两个两个堆叠div，带柔性包装，不带包装

在下面的代码片段中，我希望div显示为两行，每行两列

.column容器{
最小高度：100%；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
.包装纸{
显示器：flex；
弹性基础：计算（50%-40px）；
证明内容：中心；
弯曲方向：立柱；
}
.主题状态行--计数{
边框：1px纯红；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

10
10
10
30

您正在包装

.column容器，它只有一个子容器：
.wrapper
。你应该包装
.wrapper
，真的：


.column容器{
显示器：flex；
最小高度：100%；
弯曲方向：行；
}
.包装纸{
显示器：flex；
柔性生长：1；
柔性包装：包装；
证明内容：中心；
弯曲方向：行；
}
.wrapper>*{
弹性基础：计算（50%-40px）；
}
.主题状态行--计数{
边框：1px纯红；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

10
10
10
30
您需要为包装提供一个高度和宽度，以便包装正常工作。你需要弹性基础是宽度/高度减去边界

同样，在您的情况下，您在错误的容器上使用了flex以使包装正常工作


.flex包装器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：400px；
宽度：400px；
}
.柔性电池{
弹性：1；
边框：1px纯蓝色；
弹性基础：计算（50%-2px）；//尺寸-边框宽度
//垂直居中的内容-假设这是你想要的
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.