Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <h1>Navigation menus using CSS flexbox</h1>
  <p>The markup for all examples illustrated below are identical as follow:</p>
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Blog&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Work&quot;&gt;Work&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Resources&quot;&gt;Resources&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Meta&quot;&gt;Meta&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
  <p>The CSS code provided in each of the demo below can be toggled. They are written in the flavour of <a href="http://sass-lang.com/">Sassy CSS</a>.</p>
</header>
<section>
  <h2>Scenario 1</h2>
  <p>Equal width elements</p>
  <nav id="sc1">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Work">Work</a></li>
      <li><a href="#" title="Resources">Resources</a></li>
      <li><a href="#" title="Meta">Meta</a></li>
    </ul>
  </nav>
  <p>This is the equivalent of specifing each element to be an equal fraction of its parent's full width, i.e. each fraction is of identical size and the sum of their widths is equivalent to the parent's full width.</p>
  <p>This effect is achieved with the help of <code>flex: 1 1 100%</code> on the flex items, which is a shorthand for:</p>
  <pre><code>flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;</code></pre>
  <p>The property tells the browser to grow the items equally until they fill the full width of their flex parent, which is the <code>&lt;ul&gt;</code> element in this case. The <code>flex-basis</code> of 100% ensures that all items will be the same size and treated equally.</p>
  <p class="note">Of course, this effect can be easily replicated with the good old CSS float and percentage width trick, but this will require knowing the number of children before hand, or else one will have to calculate the percentage width with JS instead.</p>
  <a href="#" class="css-toggle">Show CSS</a>
  <pre><code>nav {
  & ul {
    display: flex;
    width: 100%;
    & li {
      flex: 1 1 100%;
    }
  }
}</code></pre>
</section>

<section>
  <h2>Scenario 2</h2>
  <p>Proportionate, content-based width</p>
  <nav id="sc2">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Work">Work</a></li>
      <li><a href="#" title="Resources">Resources</a></li>
      <li><a href="#" title="Meta">Meta</a></li>
    </ul>
  </nav>
  <p>In other words, the width of each element will be proportionate to its relative width compared to the parent. This ensures a more balanced layout in the sense that wider menu items get more spacing</p>
  <p>Here, we use the property <code>flex: 1 1 auto</code> on the children element. It is the shorthand of:</p>
  <pre><code>flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;</code></pre>
  <p>Like the previous example, <code>flex-grow: 1</code> allows the children to grow when necessary, but on the condition that the width of each element is based on the size of its content. The latter is achieved with the help of <code>flex-basis: auto</code>.</p>
  <a href="#" class="css-toggle">Show CSS</a>
  <pre><code>nav {
  & ul {
    display: flex;
    width: 100%;
    & li {
      flex-grow: 1;
    }
  }
}</code></pre>
</section>

<section>
  <h2>Scenario 3</h2>
  <p>Equally spaced elements + natural width + centered within parent</p>
  <nav id="sc3">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Work">Work</a></li>
      <li><a href="#" title="Resources">Resources</a></li>
      <li><a href="#" title="Meta">Meta</a></li>
    </ul>
  </nav>
  <p>This is one of the more complicated examples that require a lot of CSS-hacking &mdash; without the flexbox specification, one has to set each item to an inline element and then justify them.</p>
  <p>The trick here is to declare the wrapping container, <code>&lt;nav&gt;</code>, as well as the list itself, as flex displays &mdash; but we only apply the <code>justify-content: center;</code> property to the wrapping container.</p>
  <a href="#" class="css-toggle">Show CSS</a>
  <pre><code>nav {
  display: flex;
  justify-content: center;
  & ul {
    display: flex;
    & a {
      padding: 1rem 2rem;
    }
  }
} </code></pre>
</section>

<section clsas="fancy">
  <h2>Fancy example 1</h2>
  <p>Mixing flexbox with CSS transforms</p>
  <nav id="fun1">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Work">Work</a></li>
      <li><a href="#" title="Resources">Resources</a></li>
      <li><a href="#" title="Meta">Meta</a></li>
    </ul>
  </nav>
</section>

<section clsas="fancy">
  <h2>Fancy example 2</h2>
  <p>Mixing flexbox with CSS transforms</p>
  <nav id="fun2">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Work">Work</a></li>
      <li><a href="#" title="Resources">Resources</a></li>
      <li><a href="#" title="Meta">Meta</a></li>
    </ul>
  </nav>
</section>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Montserrat);

* {
  box-sizing: border-box;
}
body {
  background-color: #eee;
  color: #333;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
}
header, section {
  background-color: #fff;
  margin: 0 auto 2rem;
  padding: 1rem 2rem 2rem;
  width: 80%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2em;
  margin-bottom: 1.5rem;
}
h1 {
  font-size: 2rem;
  text-align: center;
}
h2 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
}
a {
  color: #b13131;
  text-decoration: none;
}
p {
  margin-bottom: 1.5rem;
  h2 + & {
    color: #757575;
    font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    margin-top: -.5rem;
    text-transform: uppercase;
  }
  & code {
    background-color: rgba(251,175,93,.25);
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 4px;
    display: inline-block;
    margin: 0 .25rem;
    padding: 0 .25rem;
  }
  &.note {
    background-color: #C4DF9B;
    border-left: .5rem solid rgba(0,0,0,.25);
    padding: 1rem;
  }
}

pre {
  background-color: rgba(0,0,0,.75);
  border-left: .5rem solid rgba(0,0,0,.5);
  color: #FBAF5C;
  margin: 0;
  padding: 1rem;
}

ul {
  border-bottom: 1px solid #ccc;
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(162,211,156, 1) 50%,
    rgba(162,211,156,1) 95%,
    rgba(124,197,118,1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #666;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease-in-out;
  &:hover {
    background-position: bottom center;
    color: rgba(0,0,0,.75);
  }
  & a {
    color: #666;
    display: block;
    padding: 1rem 0;
    transition: all .25s ease-in-out;
  }
}

.css-toggle {
  background-color: #ddd;
  color: #333;
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
  text-align: center;
  transition: all .25s ease-in-out;
  
  &:hover {
    background-color: #FBAF5C;
    color: #333;
  }
}

#sc1 {
  & ul {
    display: flex;
    width: 100%;
    & li {
      flex: 1 1 100%;
    }
  }
}

#sc2 {
  & ul {
    display: flex;
    width: 100%;
    & li {
      flex: 1 1 auto;
    }
  }
}

#sc3 {
  display: flex;
  justify-content: center;
  & ul {
    display: flex;
    & a {
      padding: 1rem 2rem;
    }
  }
}

[id^='fun'] ul {
  background-color: #eee;
  border: 0;
  display: flex;
  padding: 0 2rem;
  position: relative;
  left: -2rem;
  width: calc(100% + 4rem);
  & li {
    background-image: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(68,140,203, 1) 50%,
      rgba(68,140,203,1) 95%,
      rgba(0,114,188,1) 95%
      );
    flex: 1 1 auto;
    & a:hover {
      color: #eee;
    }
  }
}

#fun1 {
  & ul li {
    border-left: 2px solid #ddd;
    transform: skew(-15deg);
    &:last-child {
      border-right: 2px solid #ddd;
    }
    & a {
      transform: skew(15deg);
    }
  }
}

#fun2 {
  & li:hover {
    transform: scale(1.2);
  }
}
              
            
!

JS

              
                $(function(){
  $('.css-toggle')
  .next().hide()
  .end().click(function(e){
    e.preventDefault();
    
    if($(this).data('toggle') == 1) {
      $(this).data('toggle', 0).html('Show CSS').next().slideUp();
    } else if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
      $(this).data('toggle', 1).html('Hide CSS').next().slideDown();
    }
  });
});
              
            
!
999px

Console