就是利用主軸上的需要單獨設定位置的元素填充剩下的空間，然後將其設定成flex容器，它的子元素就可以靠其他位置了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top-bar {
font-size: 20px;
line-height: 3;
color: #fff;
background-color: darkcyan;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.top-bar-content {
display: flex;
}
.logo {
margin-right: 4em;
}
.menu-list {
display: flex;
}
.menu-list > li {
margin-right: 2em;
}
.other-option {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
.contact {
margin-right: 2em;
}
</style>
</head>
<body>
<div class="top-bar">
<div class="container">
<ul class="top-bar-content">
<li class="logo">logo</li>
<li>
<ul class="menu-list">
<li>首頁</li>
<li>產品</li>
<li>服務</li>
</ul>
</li>
<li class="other-option">
<div class="contact">聯絡我們</div>
<div>登入</div>
</li>
</ul>
</div>
</div>
</body>
</html>複製程式碼