Flex 1全宽列然后两列[重复]答案

【问题标题】：Flex 1 full width column then two columns [duplicate]Flex 1全宽列然后两列[重复]
【发布时间】：2019-10-02 19:33:55
【问题描述】：

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

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

这是小提琴：http://jsfiddle.net/3ro546yk/

.a {display: flex}
.header {background: red;}
.col {flex: 50%; background: yellow; justify-content: space-between;}

// add inner padding on yellow columns

<div class="a">
  <div class="header">header</div>
  <div class="col">col 1</div>
  <div class="col">col 2</div>
</div>

谢谢

【问题讨论】：

“出于某种原因，我的代码将所有内容都放在一行上？” - 这是 flexbox 的默认行为；如果你想让项目分成多行，那么你需要在弹性容器元素中添加flex-wrap: wrap。
试过了，我想要 100% 的标题，然后下面的两个 50% 列。使用 wrap 会将所有内容拆分到新行上？
“我想要标题 100%” - 那么你需要指定它，否则它只需要它需要的最小宽度 - 因为你正在使用 flexbox。
谢谢！这是现在的样子吗？刚开始使用 flex，一直是浮动的。 jsfiddle.net/3ro546yk/1

标签： html css flexbox

【解决方案1】：

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

.wrapper {
  display: flex;
  flex-direction: column;
}

.col-wrapper {
  display: flex;
}

.header {
  background: red;
}

.col {
  background: yellow; 
  flex: 1;
  justify-content: space-between;
}

// add inner padding on yellow columns

<div class="wrapper">
  <div class="header">header</div>
  <div class="col-wrapper">
    <div class="col">col 1</div>
    <div class="col">col 2</div>
  </div>
</div>

【讨论】：

对了，那么你需要列包装器吗？有没有办法使用我使用的确切标记来做到这一点？