如何使用 flexbox 均勻間隔嵌套和未嵌套的對象？

Question

我不太確定如何表達這個問題，但我在使用 flexbox 時甚至遇到了一些問題。 我正在 WordPress 中構建一個標題，我希望所有菜單元素之間的間距均勻。 問題是我還有另外兩個元素不屬於 WordPress 中自動生成的菜單的一部分。 我還需要它們以與菜單的嵌套列表元素相同的距離均勻分布。

我覺得這里缺乏我的知識，我需要一些關於如何解決這個問題的指示。 基本上，這是我的代碼：

 .logo { width: 15%; float: left; } .nav-wrapper { display: flex; float: right; width: 70%; flex: 2; } .nav-container { display: flex; flex: 2; } .nav-container ul { display: flex; flex: 2; justify-content: space-between; list-style: none; padding: 0; }

 <header> <div class="logo"> Logo </div> <div class="nav-wrapper"> <nav class="nav-container"> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </nav> <div class="search"> <span class="search-text">Search</span> </div> <div class="mega-menu-button"> <button> Menu </button> </div> </div> </header>

https://jsfiddle.net/3qo56h8j/1/

現在，這是一團糟。 可能根本不正確。 問題是我看不到錯誤在哪里，可以使用一些幫助。 垂直對齊關閉，但我可以解決這個問題。 最大的問題是如何將搜索和超級菜單按鈕與 WordPress 生成的菜單項保持相同的距離？ 最好以隨屏幕縮放的方式進行。

而且我不能將其他項目移動到列表中，因為列表是由 WordPress 生成的。

Answer 1

你做得很好只需要計算每個容器的 flex 。

header {
    display: flex;
}

.logo {
    flex: 1;
}

.nav-wrapper {
    display: flex;
    float: right;
    flex: 6;
}

.nav-container {
    display: flex;
    flex: 4;
}

.nav-container ul {
    display: flex;
    flex: 2;
    justify-content: space-between;
    list-style: none;
}

.nav-container li {
    flex: 1;
}

.search {
    flex: 1;
}

Answer 2

嘗試從上到下使用 flex 屬性。 從標題開始。 然后相應地間隔項目。

 header { display: flex; } .logo, .nav-wrapper, .search, .mega-menu-button { flex: 1 0 10%; display: flex; align-items: center; justify-content: center; } .nav-wrapper { flex-basis: 70%; } .nav-container { flex: 1; } .nav-container ul { display: flex; justify-content: space-around; list-style: none; padding: 0; } body { margin: 0; }

 <header> <div class="logo">Logo</div> <div class="nav-wrapper"> <nav class="nav-container"> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </nav> </div><!-- new; close .nav-wrapper --> <div class="search"> <span class="search-text">Search</span> </div> <div class="mega-menu-button"> <button> Menu </button> </div> </header>

jsFiddle 演示