CODEWITHSUNDEEP
htmlcssflexbox
bbarringer
bbarringer

Reputation: 13

Flex-box align navigation items to sidebar

On a simple flex-box layout, I am trying to align nav items to the end of the first (left) side-bar. My first thought was to recreate the aside main aside layout with :before element :after so the nav items would always align to the sidebar, but I can't seem to get the :before and :after elements to match the size of each aside. Here is an example of what I am trying to do Flex Example

And here is the current code I am using

http://codepen.io/anon/pen/GoJEbX?editors=010

Upvotes: 0

Views: 1774

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

I wouldn't be using flex-wrapping rows here. It makes sense to start with flex-direction:column to get the full 100% height and then put the middle content (main and aside elements) in their own flex-container which can then grow as much as is required.

The horizontal layout is all flexbox.

Based on the original code the aside are 1/12th wide each (flex:1) while the main is 10/12ths (flex:10).

Therefore to line up the menu with the main, the menu itself needs to be shifted over the same amount (which means it's 11/12ths [flex:11] so the pseudo-element is just flex:1.

Adjust as required.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
nav {
  display: flex;
}
nav:before {
  content: '';
  flex: 1;
  background: plum;
  /* for reference */
}
nav ul {
  display: flex;
  background: blue;
  list-style-type: none;
  flex: 11;
}
nav ul a {
  display: block;
  padding: 20px 20px 0 0;
  color: white;
  text-decoration: none;
}
.content {
  flex: 1;
  display: flex;
}
main {
  background: red;
  flex: 10;
}
aside {
  background: green;
  flex: 1;
}
footer {
  background: yellow;
}
<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">Item 1</a>
        </li>
        <li><a href="#">Item 2</a>
        </li>
        <li><a href="#">Item 3</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="content">
    <aside>Sidebar 1</aside>
    <main>Main Content Area</main>
    <aside>Sidebar 2</aside>
  </div>
  <footer>Footer</footer>
</div>

Codepen Demo

Upvotes: 3

Related Questions