Flexbox Navigation Examples

flexbox-navigation-examples.markdown

Flexbox Navigation Examples

A Pen by Tony Grimes on CodePen.

License.

index.html

<nav>
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 6: Add second menu here -->

<nav class="flex-end">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 6: Add second menu here -->

<nav class="centre">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 7: Add third menu here -->
<nav class="space-between">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 7: Add third menu here -->
<nav class="space-around">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 6: Add second menu here -->

<nav class="space-evenly">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

<!-- Objective 8: Add fourth menu here -->
<nav class="grow">
  <ul>
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Barbarian</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

style.css

/* Reset default list styles: remove bullets and left indent. */
nav ul {
  list-style-type: none;
  padding-left: 0;
}


/* Reset default link styles: remove underline, and change color. */
nav a {
  text-decoration: none;
  color: indigo;
  
  /* Add border to links (optional) */
  border: 1px solid grey;
  
  /* Increase the clickable area of the links using padding. */
  padding: 1rem 0.5rem;
  display: block;
  text-align: center;
}


/* Display links horizontally using flexbox */

nav ul {
  display: flex;
}

/* Center the links in the middle of the page (horizontally). */

.centre ul {
  justify-content: center;
}

/* Center the links in the middle of the page (horizontally). */

.flex-end ul {
  justify-content: flex-end;
}

/* Center the links in the middle of the page (horizontally). */

.space-between ul {
  justify-content: space-between;
}

/* Equal space on either side of each link; end caps get half space. */
.space-around ul {
  justify-content: space-around;
}

/* Space the links evenly, inccluding the ends. */
.space-evenly ul {
  justify-content: space-evenly;
}

/* Expand the links to fill up extra space. */
.grow li {
  flex: auto;
}

/* Resets and Side Code */

body {
/*   margin: 0; */

  font-size: 24px;
  font-variant: small-caps;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  letter-spacing: 0.2em;
}

nav {
  margin-bottom: 2rem;
}

nav ul {
  margin: 0;
}