中心包裹物品在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之间的空间

回答

相关问题