中心包裹物品在flexbox之間的空間

對於導航部分，我希望它使用space-between的理由。對於導航可能需要包裝的較小顯示器，我希望這些項目能夠集中在自己的中心，而不是在連續排列時粘在左側。中心包裹物品在flexbox之間的空間

nav { 
 
    display: flex; 
 
    width: 100%; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
}

<nav> 
 
    <div class='item'> 
 
    Item 1 is alone on its row if the window is small, but is not centered. 
 
    </div> 
 
    <div class='item'> 
 
    Item 2 is very much like item 1. 
 
    </div> 
 
</nav>

Codepen演示：https://codepen.io/anon/pen/MmdOMP?editors=1100#0

來源

2017-05-28 Jakob

您需要一個媒體查詢來完成該操作。 https://codepen.io/anon/pen/dWEJqW – LGSon

我想到了它，它在某些情況下是可行的解決方案，但是這是Hexo（靜態站點生成器）的主題。用戶可能擁有足夠小的導航以適應移動設備上的一行，或者足夠大的一個導航不適合桌面上的一行。 – Jakob

這裏的主要問題是，flexbox容器/物品不知道它們何時斷線，因此無法基於此改變它們的行爲。如果媒體查詢不會這樣做，您需要在窗口大小調整事件上執行腳本並手動檢查它們是否分成兩行 – LGSon

LGSon's comment對我來說很有意義，但據推測OP欲修改，可能會或可能不適合於容器動態文本的能力，不管flexbox配置或媒體查詢。

查看檢測行換行的JS，然後觸發一個操作（例如居中文本）。

例如：https://github.com/xdamman/js-line-wrap-detector

或者，JS是自動調整文本以適應容器內。對各種情況無用。

例如：http://www.fittextjs.com

來源

2018-01-12 00:20:09 MarsAndBack

中心包裹物品在flexbox之間的空間

回答

相關問題