如何只将某些项目放在右侧的 flexbox 中？

Question

我的导航栏有 5 个项目，我只想将其中两个放在右边 - 这样它们看起来就好像 'aligned' 在右边。我在 .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>

Answer 1

你只需要将right class应用到第一个被推过去的

* {
    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>

如何只将某些项目放在右侧的 flexbox 中？

How to place only certain items in a flexbox to the right?

html

css

flexbox

alignment

navbar