Css 将包装好的物品放在flexbox和

对于导航部分，我希望它在对齐之间使用

空格。对于导航可能需要换行的较小显示，我希望项目本身居中，而不是单独在一行上时停留在左侧


nav{
显示器：flex；
宽度：100%；
柔性流：行换行；
证明内容：之间的空间；
}

如果窗口很小，但未居中，则项目1在其行上是单独的。
第2项与第1项非常相似。
对我来说很有意义，但OP可能希望能够修改容器中可能适合或不适合的动态文本，而不管flexbox配置或媒体查询

查看检测换行的JS，然后触发一个动作（例如，文本居中）

例如：

或者，自动调整文本大小以适应容器的JS。在各种情况下都没用

例如：
在我看来，有两种解决方案：

使用CSS媒体查询或
JS解决方案，解释如下：
当项目被包装时，它需要100%的宽度，您需要做的是在window resize事件中检查项目的宽度，如果它是相对于父元素的100%，这意味着它被包装，您可以在此时添加一个类，并在语句为false时删除它：

function justifyCenter() {
    var navWidth = $("nav").width();
    var itemWidth = $(".item:first-child").width();

    if (navWidth === itemWidth ) {
        $("nav").addClass('justify-center');
    } else {
        $("nav").removeClass('justify-center');
    }
}

Codepen演示：
您需要一个媒体查询来完成此任务。我考虑过它，在某些情况下它是一个可行的解决方案，但这是针对Hexo（静态站点生成器）的主题。用户可能有一个足够小的导航，可以在手机上放置一行，或者有一个足够大的导航，不能在桌面上放置一行。这里的主要问题是flexbox容器/项目不知道它们何时断线，因此无法基于此更改其行为。如果媒体查询无法做到这一点，您将需要在窗口调整大小事件上执行脚本，并手动检查它们是否分成两行EAH，这是非常正确的。我正在尝试在孩子们之间使用分隔符元素。将对齐方式更改为

前后空格，可以在分隔符上使用flex grow，以在单行视图中获得相同的结果，但它会与另一个元素粘在同一行上，除非它设置为大宽度，在这种情况下，它会打断单行视图（仍然需要任意宽度规范）考虑使用空间代替空间。