flex容器属性实战: 快速撸一个主导航

 <!-- flex做导航 -->
    <header>
        <nav>
            <a href="">首页</a>
            <a href="">教学视频</a>
            <a href="">社区问答</a>
            <a href="">资源下载</a>
            <a href="">登录/注册</a>
        </nav>
    </header>

<style>
        /* 初始化 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: #ccc;
        }
        nav{
            height: 40px;
            background-color: #333;
            padding: 0 50px;
             /* 转为弹性盒布局 */
            display: flex;
        }
        nav a{
            height: inherit;
            line-height: 40px;
            padding: 0 15px;
        }
        nav a:hover{
            background-color: seagreen;
            color: white;
        }
        /* 登录/注册放在最右边 */
        nav a:last-of-type{
            margin-left: auto;
        }
    </style>