Flexbox響應式菜單

這兩天在研究flexbox，來看一個Flexbox實現的響應式菜單。

大家可以到codepen線上把玩，或下載收藏本效果，記得用不同的視窗寬度來測試響應式布局哦。

好的，html檔案很簡單，就是一個普通的菜單

<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檔案

.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;  }}

好的，完工。---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------