看了這篇文章中的示例，才猛然意識到街立，原來 flexbox 也可以制作導(dǎo)航啊舶衬。
天知道我對于使用ul>li>a 這樣寫成的導(dǎo)航有多么厭惡，明明已經(jīng)有了nav標簽赎离，大家還是在用列表寫導(dǎo)航逛犹，搞出一大堆css代碼。
吐槽完了說正事梁剔，直接使用nav>a再加上flexbox虽画，就可以輕松搞定導(dǎo)航。我知道這想法很超前荣病，但flexbox在發(fā)展码撰，瀏覽器在不斷升級，總有一天我們可以沒有顧慮地簡單地寫導(dǎo)航个盆。
HTML代碼
<header id="header">
<nav>
<a href="">首頁</a>
<a href="">作品</a>
<a href="">關(guān)于</a>
<a href="">聯(lián)系</a>
</nav>
</header>
CSS代碼
nav{
background-color: #aaa;
height: 50px;
margin: 20px 0;
display: flex;
justify-content: flex-start; //改變這一句代碼就可以改變導(dǎo)航的布局
}
nav a{
flex-flow: row;
line-height: 50px;
display: inline-block;
width: 100px;
text-align: center;
background-color: #5f5f5f;
color: #fff;
}
nav a:hover{
background-color: #000;
}
效果圖（請原諒我性冷淡風格的配色）
Flexbox 導(dǎo)航條效果
