无法使柔性显示工作

Question

我会在图像中向您展示我想要做的事情，以便看得更清楚......

1：标题与内容占用相同的空间。

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

我已经创建了一个小提琴，看看它。 我希望这将有所帮助。 没有多余的 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

Answer 2

这里有几个使用伪元素的版本

示例 1，我只在标题中添加了一个额外的 div

.flex {
  display: flex;
  flex-wrap: wrap;
}
.header {
  width: 100%;
  display: flex;
}
.header::before,
.header::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
.header > div {
  flex: 2;
  background: lightblue;
}

.content {
  flex: 2;
  background: lightgreen;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='flex'>
  
    <header class='header'>
      <div>head<br>head<br></div>
    </header>
  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content<br>content<br>content<br>content<br>
    </content>

    <aside class='aside-1'>right
    </aside>
  
</div>

示例 2a，我在标题和旁边/内容周围添加了一个额外的 div

.flex {
  display: flex;
}
.header {
  flex: 2;
  background: lightblue;
}
.content {
  flex: 2;
  background: lightgreen;
}
.pad::before,
.pad::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='flex pad'>
    <header class='header'>head<br>head<br>
    </header>
  </div>
  
  <div class='flex main'>  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content<br>content<br>content<br>content<br>
    </content>

    <aside class='aside-1'>right
    </aside>
  </div>

示例 2b，这里有一个包装器以使其填充视口高度

html, body {
  margin: 0;
}
.wrapper {                  /*  wrapper: make it all fill viewport height  */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.flex {
  display: flex;
}
.main {
  flex: 1;                  /*  fill remaining space  */
}
.header {
  flex: 2;
  background: lightblue;
}
.content {
  flex: 2;
  background: lightgreen;
}
.pad::before,
.pad::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='wrapper'>

  <div class='flex pad'>
    <header class='header'>head
    </header>
  </div>
  
  <div class='flex main'>  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content
    </content>

    <aside class='aside-1'>right
    </aside>
  </div>

</div>

Answer 3

试试这个：

HTML 结构：

      <div class="flex">
        <header id="header"></header>
      </div>
      <div class="flex">
        <aside id="aside-1" class="flex-1"></aside>
        <content id="content"></content>
        <aside id="aside-2" class="flex-1"></aside>
      </div>

CSS：

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

#header {
  width: 50%;
  margin-left:25%;
  background: green;
  height:50px;
}

#content {
  flex: 2;
  background: red;
  height: 300px;
}

#aside-1 {
  background: orange;
}

#aside-2 {
  background: blue;
}

（之后去掉背景和高度属性，它们只是为了显示。）