用均衡的CSS柔性包裝容器導航

Question

我真的很喜歡新的CSS柔性箱設計可能性。尤其是flex-wrap: wrap可以成爲節省空間的強大工具（例如簡單的移動導航設計模式）。

我的情況：我有此導航，桌面上的所有項目排成一行。與flex:auto項目填補了所有的空間。現在，當我調整瀏覽器大小時，在沒有剩餘空間的情況下，flex-wrap自動爲我創建第二行。

看到我的小DEMO或看看這張照片：

這是逗我：只有第一項是第二行（當第一包絡發生）英寸這不是很平衡，並且對這個項目給予了很多關注。我想要的是平均分配他們。有沒有一個僅限CSS的沒有黑客入選的方式，我在這裏失蹤？

編輯：我這樣做的動態web應用程序的佈局。這種導航應該適合不同的觀點和情況。所以我不想在乎會有多少物品。標記理想情況下應該是一個簡單的ul li列表（沒有額外的行，沒有額外的類）。所以我真的在尋找某種CSS參數魔術。

編輯2：爲了更好的理解：text-wrap: balance是一個建議，基本上只與純文本的排版塊大體相同。

編輯3：請參閱引導CSS框架網格模型爲例。在這裏你有各種各樣的列寬。您需要爲每個設備寬度定義一列需要多少空間（第三，四分之一），例如：此列在桌面上佔用四分之一的寬度，但只佔電話寬度的一半。當瀏覽器能證明這一點時，它會不會更酷？編輯4：想到CSS列，這裏的內容跨越列，但內容方向只能以N形式（逐列）出現，想象在Z形式（逐行）中相同。

Answer 1

當發生此不需要的佈局時，使用媒體查詢來隔離視口寬度。將flex-grow屬性應用於要比其他項目更大的項目。例如，您可以將第一個和最後一個項目設置爲flex-grow: 2;，它們將是第二個和第三個項目的兩倍。