Here is another example of flexbox layout making Navigation bar responsive along the different sizes of the screen.

HTML CODE:

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS CODE: 

.navigation {
  list-style: none;
  margin: 0;
  background: deepskyblue;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #00b7f5;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}
@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }

  .navigation a {
    text-align: center;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .navigation li:last-of-type a {
    border-bottom: none;
  }
}

Some explanation of the above CSS: 

.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

 On normal and large screen we aligned the content of the .navigation to the right side along the main-axis.

@media all and (max-width: 800px) {
.navigation {
    justify-content: space-around;
  }
}

When on medium sized screens, we center it by evenly distributing empty space around items. You will see that the links  are now appeared in center with evenly space around them.

@media all and (max-width: 600px) {
 .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
}

On small screens, we are no longer using row direction but column, this will make the links to appear line by line.