How to align cascaded div containers with Flexbox

Question

I am trying to achieve the following layout for a navigation bar with Flexbox. I am stuck with the alignment of the divs. This is how it should like:

Sample DIV Layout

This is what i build up with Divs and CSS. But i dont know how to align those divs, so that i get the desired result.

Fiddle

* {
  box-sizing: border-box;
}

#nav {
  display: flex;
}

#logo {
  width: 100px;
  heigth: 100px;
  background-color: black;
  margin-left: 24px;
}

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered Oct 05 '17 at 14:38

I would add a few more flex containers to some of the child divs. I'd also specify the width and flex-direction on the #left_side div and justify the content on the #top_nav div.

Try the snippet below or see this updated fiddle:

* {
  box-sizing: border-box;
}

#nav,
#left_side,
#top_nav,
#bottom_nav {
  display: flex;
}

#left_side {
  flex-direction: column;
  width: 100%;
}

#top_nav {
  justify-content: space-between;
}

#logo {
  width: 100px;
  heigth: 100px;
  background-color: black;
  margin-left: 24px;
}

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Oct 05 '17 at 14:43

There are many good guides to flexbox available. This one is very good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Your layout can be achieved by adding the following CSS

fiddle

* {
  box-sizing: border-box;
}

#nav {
  display: flex;
}

#logo {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-left: 24px;
}

#left_side {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#top_nav {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

#bottom_nav {
  display: flex;
  flex: 1;
}

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

Michael Benjamin · Answer 3 · 2017-10-05T15:04:33.050

Flexbox is one way to build the layout. You'll need extra containers to make it work.

However, if you want to keep it really simple, use CSS Grid:

header {
  display: grid;
  grid-template-columns: 100px 3fr 1fr;
  grid-template-rows: 50px 50px;
  grid-template-areas: " logo title switch " 
                       " logo  nav   nav   ";
}

#logo        { grid-area: logo; }
#title       { grid-area: title; }
#menu_switch { grid-area: switch; }
nav          { grid-area: nav; display: flex; }

nav > a {
  flex: 0 0 75px;
  margin: 5px;
  border: 2px solid green;
}

/* for demo only */
#logo        { background-color: lightgray; }
#title       { background-color: pink; }
#menu_switch { background-color: skyblue; }
nav          { background-color: lightgreen; }
*            { box-sizing: border-box; }
div, a       { display: flex; align-items: center; justify-content: center;
               text-align: center; }

<header>
  <div id="logo">100x100px<br>Logo</div>
  <div id="title">Page Title</div>
  <div id="menu_switch">Switch</div>
  <nav>
    <a class="nav_item">Menu 1</a>
    <a class="nav_item">Menu 2</a>
    <a class="nav_item">Menu 3</a>
    <a class="nav_item">Menu 4</a>
  </nav>
</header>

jsFiddle demo

For an explanation of the grid rules above and browser support data, see these posts:

How to align cascaded div containers with Flexbox

3 Answers3

jsFiddle demo