html - Flex 1 全宽列然后两列

Question

我想要一个全宽的行/列，然后直接在下面我想要 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>

谢谢

标签： htmlcssflexbox

Answer 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>