html - 如何在 flexbox 中移动元素？

Question

我想将“right”类中的所有元素移动到浏览器的最右侧，但仍与“left”类在同一行。我已经使用 justify-content: flex-end 但它似乎不起作用。链接中的引用 https://imgur.com/8mE7W54

body{
font-family: sans-serif;
color: black;
height: 100vh;
}
.navbar h3{
    border:1px #ccc solid;
    display: inline-flex;
}

.left{
    display: inline-flex;
}
.right{
    display: inline-flex;
    justify-content: flex-start;    
}

<div>
        <div class="navbar">
            <div class="left">
                <h3>ABOUT</h3>
                <h3>CONTACT</h3>
                <h3>FAQS</h3>
            </div>
            <div class="right">
                <h3>MANAGE BOOKING</h3>
                <h3>SIGN IN</h3>
                <h3>REGISTER</h3>
            </div>
        </div>
        <div class="center">
            <div>Find your ideal car from 500+</div>
        </div>
    </div>

Answer 1

你的 navbar 类应该是 display: flex with justify-content: space-between:

body{
font-family: sans-serif;
color: black;
height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
}
.navbar h3{
    border:1px #ccc solid;
}

.left{
    display: inline-flex;
    justify-content: left;
}

.right{
    display: inline-flex;
    justify-content: right;    
}

<div>
        <div class="navbar">
            <div class="left">
                <h3>ABOUT</h3>
                <h3>CONTACT</h3>
                <h3>FAQS</h3>
            </div>
            <div class="right">
                <h3>MANAGE BOOKING</h3>
                <h3>SIGN IN</h3>
                <h3>REGISTER</h3>
            </div>
        </div>
        <div class="center">
            <div>Find your ideal car from 500+</div>
        </div>
    </div>

Here's a Codepen of a more complex example , 来自 this CSS-Tricks post .