Html Flex 1全宽列，然后是两列

我想有一个全宽的行/列，然后直接在下面我想要2个50%的列与内部填充

出于某种原因，我的代码将所有内容放在一行上

这是小提琴：

.a{display:flex}
.header{背景：红色；}
.col{flex:50%；背景：黄色；对齐内容：间距；}
//在黄色列上添加内部填充

标题
第1列
第2列

我只是更新了您的代码，并对UI和结构进行了一些更改。我希望它能帮助你。谢谢

.wrapper{
显示器：flex；
弯曲方向：立柱；
}
上校包装{
显示器：flex；
}
.标题{
背景：红色；
}
上校{
背景：黄色；
弹性：1；
证明内容：之间的空间；
}
//在黄色列上添加内部填充

标题
第1列
第2列

啊，对了，那么您需要列包装器了吗？有没有一种方法可以使用我所使用的准确标记来实现这一点？“出于某种原因，我的代码将所有内容放在一行上？”-这是flexbox的默认行为；如果您想允许项目分成多行，那么您需要将

flex-wrap:wrap

添加到flex-container元素中。使用wrap it将所有内容拆分到一个新行上？“我想要100%的标题”-然后您需要指定它，否则它只需要它所需的最小宽度-因为您使用的是flexbox。谢谢！现在看起来像吗？刚开始使用flex时，总是使用浮动。