Responsive navigation using flex-box

Create a simple responsive navigation

by vikikamath

HTML

<header>
  <nav>
    <ul class="nav container">
      <li class="red"><a href="#red">Red Nav</a></li>
      <li class="blue"><a href="#blue">Blue Nav</a></li>
      <li class="green"><a href="#green">Green Nav</a></li>
      <li class="brown"><a href="#brown">Brown Nav</a></li>
      <li class="black"><a href="#black">Black Nav</a></li>
    </ul>
  </nav>
</header>

CSS

/* responsive flex stuff */
.container {
  display: flex;
}

.nav {
  flex-direction: row;
  justify-content: space-around;
}


@media all and (max-width: 480px) {
  .nav {
    flex-direction: column;
  }
}

/* --- */

/* decoration stuff */

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.brown {
  background-color: brown;
}

.black {
  background-color: black;
}
/* --- */

/* defaults - maybe set by reset.css */
body {
  color: #fff;
  box-sizing: border-box;
  text-align: center;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

li {
  padding: 0px;
  margin: 0px;
}

/* --- */