如何仅将某些项目放在右侧的弹性框中？ [复制]答案

【问题标题】：How to place only certain items in a flexbox to the right? [duplicate]如何仅将某些项目放在右侧的弹性框中？ [复制]
【发布时间】：2022-01-15 00:47:08
【问题描述】：

我的导航栏有 5 个项目，我只想将其中两个放在右侧 - 这样它们看起来就好像它们“对齐”到了右侧。我在.right 规则块中使用margin-left: auto; 规则进行了尝试，但这并不奏效。我应该如何解决这个问题？

* {
    box-sizing: border-box;
    margin: 0;
    padding:0
}

#flex-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.right {
    margin-left: auto;
}

        <div id='flex-nav'>
            <a href='#'>Home</a>
            <a href='#'>News</a>
            <a href='#'>About</a>
            <a class='right' href='#'>Sign-in</a>
            <a class='right' href='#'>Sign-up</a>
        </div>

【问题讨论】：

你的案例是重复问题中的一个例子

标签： html css flexbox alignment navbar

【解决方案1】：

您只需要将right 类应用于要推送的第一个。

* {
    box-sizing: border-box;
    margin: 0;
    padding:0
}

#flex-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.right {
    margin-left: auto;
}

        <div id='flex-nav'>
            <a href='#'>Home</a>
            <a href='#'>News</a>
            <a href='#'>About</a>
            <a class='right' href='#'>Sign-in</a>
            <a href='#'>Sign-up</a>
        </div>

【讨论】：