用 flexbox 制作导航

2019年5月12日 122次阅读 来源: 董懂同学

看了这篇文章中的示例，才猛然意识到，原来 flexbox 也可以制作导航啊。
天知道我对于使用ul>li>a 这样写成的导航有多么厌恶，明明已经有了nav标签，大家还是在用列表写导航，搞出一大堆css代码。
吐槽完了说正事，直接使用nav>a再加上flexbox，就可以轻松搞定导航。我知道这想法很超前，但flexbox在发展，浏览器在不断升级，总有一天我们可以没有顾虑地简单地写导航。

HTML代码

<header id="header">
    <nav>
        <a href="">首页</a>
        <a href="">作品</a>
        <a href="">关于</a>
        <a href="">联系</a>   
    </nav>
</header>

CSS代码

nav{
    background-color: #aaa;
    height: 50px;
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;  //改变这一句代码就可以改变导航的布局
}
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 制作导航》 Flexbox 导航条效果

Demo 演示地址

    原文作者：董懂同学
    原文地址: https://www.jianshu.com/p/b47b52fe06fd
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞