html - 无法使 flex 显示工作

Question

我会用一张图片向你展示我想做的事情，让你看得更清楚...

1: header 与内容占用相同的空间。

2:“aside-1”、“content”和“aside-2”在顶部水平对齐。

#flex{
  display:flex;
  flex-wrap: wrap;
}

aside{
  max-width: 300px;
}

<div id='flex'>
  <header id='header'>
  </header>
  
  <aside id='aside-1'>
  </aside>
  
  <content id='content'>
  </content>
  
  <aside id='aside-1'>
  </aside>
  
 </div>

附言如果我在标题的左侧和右侧放置另外 2 个 div，我可以完成...这将占用与标题相同的空间...但我想在没有那个 div 的情况下实现它。

我想要 Css/html 的解决方案。

谢谢!

Answer 1

我创建了一个 fiddle ，看看它。我希望这个能帮上忙。没有多余的 div。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#flex {
  display: flex;
  flex-direction: column;
  background: #ccc;
  width: 100%;
}

#flex .holder {
  display: flex;
  flex-direction: row;
      margin-top: 18px;
}

#flex .holder > * {
  flex: 1;
}

aside {
  max-width: 300px;
}

#header {
  background: #00a652;
  margin-top: -18px;
}

#aside-1 {
  background: #f7941d;
}

#aside-2 {
  background: #00adef;
}

#content {
  background: #ed1b24;
}

<div id='flex'>


  <div class="holder">
    <aside id='aside-1'>
      aside01
    </aside>

    <content id='content'>
      <header id='header'>
        header
      </header>
      Content
    </content>

    <aside id='aside-2'>
      aside02
    </aside>
  </div>

</div>

Click for fiddle Demo