如何将导航栏中PORTFOLIO元素置于页面最左侧？

我是HTML/CSS新手，想把导航栏里的PORTFOLIO文本放到页面最左侧，其余导航项保持居中。目前我通过列表创建导航栏，用display:flex实现横向排列，justify-content:center让导航栏整体居中，align-items:center实现垂直居中，但尝试justify-self、left属性、align-self都没效果。

我的代码如下：

HTML代码 #

<nav>
    <ul id="nav">
        <li class="nav-item">PORTFOLIO</li>
        <li class="nav-item">Présentaion</li>
        <li class="nav-item">Réalisations</li>
        <li class="nav-item">Mon CV</li>
        <li class="nav-item">Me contacter</li>
    </ul>
</nav>

CSS代码 #

#nav{
    display : flex;
    text-transform: uppercase;
    justify-content:center;
    align-items: center;  
}

.nav-item{
    text-decoration : none;
    list-style : none;
    text-transform: uppercase;
    margin-right: 2em;
    font-family: 'Oswald', sans-serif;
}

.nav-item:first-child{
    font-size:30px;
}

解决方案 #

要实现PORTFOLIO靠左、其余导航项居中的效果，不能只给第一个子元素加样式，需要调整flex容器的布局逻辑，这里提供两种可行方法：

方法一：利用margin-auto和绝对定位 #

1. 修改#nav的样式，让它占满页面宽度，并去掉justify-content:center：

#nav{
    display : flex;
    text-transform: uppercase;
    align-items: center;  
    width: 100%;
    position: relative;
}

2. 给第一个导航项设置margin-right:auto，让它自动靠左：

.nav-item:first-child{
    font-size:30px;
    margin-right: auto;
}

3. 将除PORTFOLIO外的导航项包裹在一个容器中（比如<div class="nav-group">），调整HTML结构：

<nav>
    <ul id="nav">
        <li class="nav-item">PORTFOLIO</li>
        <div class="nav-group">
            <li class="nav-item">Présentaion</li>
            <li class="nav-item">Réalisations</li>
            <li class="nav-item">Mon CV</li>
            <li class="nav-item">Me contacter</li>
        </div>
    </ul>
</nav>

4. 给这个容器添加绝对定位，让它居中：

.nav-group{
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方法二：拆分导航结构（更语义化） #

把导航拆成两部分：左侧的PORTFOLIO和居中的其他导航项，用两个容器分别控制：

1. 修改HTML结构：

<nav>
    <div class="nav-container">
        <div class="nav-left">
            <span class="nav-item">PORTFOLIO</span>
        </div>
        <ul class="nav-center">
            <li class="nav-item">Présentaion</li>
            <li class="nav-item">Réalisations</li>
            <li class="nav-item">Mon CV</li>
            <li class="nav-item">Me contacter</li>
        </ul>
    </div>
</nav>

2. 编写对应的CSS：

.nav-container{
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-left .nav-item{
    font-size:30px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.nav-center{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.nav-center .nav-item{
    list-style : none;
    text-transform: uppercase;
    margin-right: 2em;
    font-family: 'Oswald', sans-serif;
}

这两种方法都能实现你想要的效果，第二种结构更清晰，便于后续维护。

内容的提问来源于stack exchange，提问作者easymoneysniper23