Flexbox responsive menu

I have been studying flexbox these two days to see a responsive menu implemented by Flexbox.

You can go to codepen to play online or download the effect of adding to favorites. Remember to use different window widths to test the responsive layout.

Okay. The html file is very simple. It is a normal menu.

<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 file

.navigation {  list-style: none;  margin: 0;     background: deepskyblue;  border-bottom: 2px solid hotpink;  box-shadow: 0 0 5px rgba(0,0,0,1);    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 {  color: #333;  text-decoration: none;  display: block;  padding: 15px;  color: white;  font-weight: bold;}.navigation a:hover {  background: darken(deepskyblue, 2%);}@media all and (max-width: 800px) {  .navigation {    justify-content: space-around;  }}@media all and (max-width: 600px) {  .navigation {    -webkit-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;  }}

Okay, it's done. ---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------