Css Flexbox導航欄右對齊

基本上我想要做的是在css中實現導航器而不使用float/clearfix。相反，我正在使用更好的方法，css3的flexbox。我知道將物品輕鬆對齊左側很簡單，但是對於具有兩個對齊區域的長尾巴的最佳解決方案是什麼？Css Flexbox導航欄右對齊

喜歡的東西：

[首頁] - [東西] ------------ [積分] - [企業]

這是我嘗試實現這個：

https://jsfiddle.net/asss321/ornontbt/

基本上想法是包裹2個flexboxes成一個和右Flexbox的設置爲：

.child.child-right { 
    flex-grow: 1; 
    justify-content: flex-end; 
}

這是一個很好的方法嗎？或者我正在使用一些黑客方式？

來源

2015-05-02 v4ss

你的方式不錯。但是，使用嵌套元素可能是不必要的。

.container { 
 
    display: flex; 
 
    border: solid 1px black; 
 
} 
 
.container > :nth-child(2) { 
 
    margin-right: auto; 
 
} 
 
a { 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <a href="#">Start</a> 
 
    <a href="#">Extra</a> 
 
    <a href="#">Credits</a> 
 
    <a href="#">About</a> 
 
</div>

所有的

來源

2015-05-02 22:57:06 Oriol

首先，感謝您推薦這樣做的另一種方式，但我認爲解決的辦法應該是更通用。所以應該在html代碼中動態設置a標籤應該對齊的地方。就像在bootstrap中，我們可以使用navbar右邊的類。 – v4ss

只需在右對齊的第一個元素上設置一個類，並在該類中設置margin-left：auto – vals

Css Flexbox導航欄右對齊

回答

相關問題