在 flexbox 中左、中、右對齊元素

Question

我正在嘗試使用 flexbox 創建這個頂部標題。

基本上，我想將<div class="header-title"> （機構 1）與您看到的其他 3 個元素放在一起。 （Institutioner、Ledere 和 Log ud）就像您在圖像上看到的那樣。

 .nav { background: #e1e1e1; } ol, ul { list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .header-title { justify-content: center; align-self: center; display: flex; } .nav ul li.logout { margin-left: auto; } .nav ul li a { text-decoration: none; padding: 0px 20px; font-weight: 600; }

 <div class="nav mobilenav"> <div class="header-title"> Institution institution 1 </div> <ul> <li><a href="/institutions/">Institutioner</a></li> <li> <a href="/leaders/">Ledere</a> </li> <li class="logout"> <a class="button-dark" href="/user/logout">Log ud</a> </li> </ul> </div>

演示 - JSFiddle

Answer 1

使用嵌套的 flex 容器和flex-grow: 1 。

這允許您在導航欄上創建三個等寬的部分。

然后每個部分變成一個（嵌套的）flex 容器，它允許您使用 flex 屬性垂直和水平對齊鏈接。

現在左右項目固定在容器的邊緣，中間項目完全居中（即使左右項目寬度不同）。

 .nav { display: flex; height: 50px; /* optional; just for demo */ background: white; } .links { flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ display: flex; justify-content: flex-start; align-items: center; border: 1px dashed red; } .header-title { flex: 1; display: flex; justify-content: center; align-items: center; border: 1px dashed red; } .logout { flex: 1; display: flex; justify-content: flex-end; align-items: center; border: 1px dashed red; } .links a { margin: 0 5px; text-decoration: none; }

 <div class="nav mobilenav"> <div class="links"> <a href="/institutions/">Institutioner</a> <a href="/leaders/">Ledere</a> </div> <div class="header-title">Institution institution 1</div> <div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div> </div>

js小提琴

Answer 2

使用justify-content: space-between; 像這樣：

 .container { display: flex; justify-content: space-between; }

 <div class="container"> <div>A</div> <div>B</div> <div>C</div> </div>

Answer 3

如果您願意更改 html，則需要將標題中的所有項目放在 DOM 中的同一級別。

這是一個工作示例

 .nav { background: #e1e1e1; list-style: none; display: flex; align-items: center; justify-content: space-between; height: 60px; } .nav > div { min-width: 0; white-space: nowrap; } .header-title { flex-basis: 80%; text-align: center; } .nav div a { text-decoration: none; padding: 0px 20px; font-weight: 600; }

 <div class="nav mobilenav"> <div><a href="/institutions/">Institutioner</a></div> <div><a href="/leaders/">Ledere</a></div> <div class="header-title"> Institution institution 1 </div> <div class="logout"> <a class="button-dark" href="/user/logout">Log ud</a> </div> </div>

Answer 4

這是一個 Flex 解決方案，可在正確居中中間容器的同時對齊左右容器。

 .header-box { width: 100%; display: flex; flex-flow: row wrap; padding-top: 50px; } .left-header, .center-header, .right-header { flex: 100px; /* adjust width if needed */ } .header-box div:nth-of-type(1) { text-align: left; } .header-box div:nth-of-type(2) { align-self: center; text-align: center; } .header-box div:nth-of-type(3) { text-align: right; }

 <div class="header-box"> <div class="left-header">Left<br>header<br>content</div> <div class="center-header">Center<br>header<br>content</div> <div class="right-header">Right<br>header<br>content</div> </div>