flex的布局(二)

<header class="navbar">
    <div class="logo">🍔 我的网站</div>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">设置</a>
    </nav>
</header>

<style>
    .navbar {
        display: flex;
        justify-content: space-between;
        /* 两端对齐，中间留白 */
        align-items: center;

        padding: 0 20px;
        height: 60px;
        background: #333;
        color: white;
    }

    .navbar a {
        color: white;
        text-decoration: none;
        margin-left: 20px;
        /* 链接之间的间距 */
    }
</style>

将height删除，改成padding 20px 20px后

这里考虑用height固定高度，不用padding，原因是考虑到修改字体大小的话，字体大小带着高度变化，而且可能有其他例如侧边栏之类的和塔保持相对固定位置