html - 将两个 child 堆叠在一起，并与 flexbox parent 中的另一个 child 内联

Question

这是我想要的编排:

1. Narrow View           2. Medium View             3.Huge View
|----------------------| |------------------------| |----------------------|
|  Header     | Nav 2  | | Header | Nav 1 | Nav 2 | |       Header         |
|----------------------| |------------------------| |----------------------|
|        Nav 1         | |                        | | Nav 1 |              |
|----------------------| |        Content         | |-------|    Content   |
|       Content        | |                        | | Nav 2 |              | 
|----------------------| |------------------------| |-------|--------------|

到目前为止，我已经成功地重现了前两个 View ，第三个让我感到困惑。

是否可以使用 flexbox 实现此目的，还是我必须在主要断点之后应用 float ？

这是 SCSS(每个元素都是 main 的直接子元素，@include 只是媒体查询的缩写):

main {
  display: flex;
  flex-flow: row wrap;
}
header {
  flex: 0 auto;
  order: 1;
  @include medium { flex: 1; } 
  @include huge { flex: 0 100%; }
}
nav#nav {
  flex: 0 100%;
  order: 3;
  @include medium {
    order: 2;
    flex: 0 auto;
  }
  @include huge { flex: 0 120px; }
}

nav#social {
  flex: 1;
  order: 2;
  @include medium {
    order: 3;
    flex: 0 auto;
  }
  @include huge { flex: 0 120px;}
} 
#content {
  flex: 0 100%;
  order: 4;
  @include huge { flex: 0 calc(100% - 240px); }
}

Here's a pen for this

Answer 1

您要求的是混合列和行方向的能力，如果不使用额外的 flex 容器，这是不允许的:

http://codepen.io/cimmanon/pen/vlytF

HTML

<main>
  <header>
    <h1>Header</h1>
  </header>
  <nav>
    <ul id="nav">
      <li><a href="#">Nav 1</a>
      <li><a href="#">Nav 2</a>
    </ul>
    <ul id="social">
      <li><a href="#">Social 1</a>
      <li><a href="#">Social 2</a>
    </ul>
  </nav>
  <div id="content">
    <p>Content</p>
  </div>
</main>

萨斯:

main {
  display: flex;
  flex-flow: row wrap;
}
header {
  flex: 1 100%;
  order: 1;
}
nav {
  display: flex;
  flex: 0 10em;
  order: 3;
  flex-direction: column;

  ul {
    flex: 1 auto;
    margin: 0;
  }
}

#content {
  flex: 1 auto;
  order: 4;
  min-height: 10em;
}

但是，这不会帮助您重新创建最小的布局。对不起。