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

到目前为止，我已经设法重现了前2个视图，第三个视图让我感到困惑。

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

这是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;
}

但是，这无法帮助您重新创建最小的布局。遗憾。

将两个孩子堆叠在一起，并与Flexbox父级中的另一个孩子内联

1 个答案: