CODEWITHSUNDEEP
htmlcsssassflexbox
Abensur
Abensur

Reputation: 594

Stack two children on top of each other and both inline with another child within a flexbox parent

Here's my desired choreography:

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

So far I've managed to reproduce the first 2 views, the third one is confusing me.

Is it possible to achieve this with flexbox or will I have to apply floats after the major breakpoint?

Here's the SCSS (each element is a direct child of main and the @include's are just shorthands for the media queries):

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

Upvotes: 1

Views: 168

Answers (1)

cimmanon
cimmanon

Reputation: 68319

What you're asking for is the ability to mix column and row directions, which are not allowed without the use of an additional flex container:

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>

Sass:

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

However, this won't help you recreate your smallest layout. Sorry.

Upvotes: 1

Related Questions