将包裹的项目居中放置在 flexbox 之间的空格中答案

【问题标题】：Center wrapped items in a space-between flexbox将包裹的项目居中放置在 flexbox 之间的空格中
【发布时间】：2017-10-29 01:17:56
【问题描述】：

对于导航部分，我希望它使用space-between 理由。对于导航可能必须换行的较小显示器，我希望项目能够自行居中，而不是在单独一行时粘在左侧。

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

【问题讨论】：

你需要一个媒体查询来完成它。 codepen.io/anon/pen/dWEJqW
我想到了，在某些情况下它是一个可行的解决方案，但这是针对 Hexo（静态站点生成器）的主题。用户可能有一个小到足以在移动设备上放一排的导航，或者一个大到无法在桌面上放一排的导航。
这里的主要问题是 flexbox 容器/项目不知道它们何时断线，因此不能基于此改变它们的行为。如果媒体查询不起作用，则需要在窗口调整大小事件上执行脚本并手动检查它们是否分成两行
是的，确实如此。我正在尝试在孩子之间使用分隔元素。将对齐方式更改为space-around，可以在分隔符上使用flex-grow 在单行视图中获得相同的结果，但除非将其设置为较大的宽度，否则它会与另一个元素保持在同一行上，在这种情况下它破坏了单行视图（并且仍然需要任意宽度规范）。
考虑使用 space-around 而不是 space-between。 stackoverflow.com/a/36487987/3597276

标签： css mobile dynamic flexbox

【解决方案1】：

从我的角度来看，可以有两种解决方案：

使用 CSS 媒体查询或；
JS 解决方案，解释如下：

当 item 被包裹时，它需要 100% 的宽度，你需要做的是检查 window resize 事件的 item 的宽度，如果它是 100% 相对于父元素意味着它被包裹了，你可以此时添加一个类，当语句为假时将其删除：

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 演示： https://codepen.io/anon/pen/WzgpLw

【讨论】：

【解决方案2】：

LGSon's comment 对我来说很有意义，但大概 OP 希望能够修改可能适合或不适合容器的动态文本，而不管 flexbox 配置或媒体查询如何。

查看检测换行的 JS，然后触发操作（例如，使文本居中）。

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

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

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

【讨论】：