Question

对于导航部分，我希望它使用space-between对齐。对于导航可能需要换行的小型显示器，我希望这些项目能够居中，而不是单独在一排时粘在左侧。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

当项目被包装时，它需要100％的宽度，你需要做的是检查窗口调整大小事件的项目宽度，如果相对于父元素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演示： https://codepen.io/anon/pen/WzgpLw

Answer 2

LGSon's comment对我有意义，但可能是OP希望能够修改容器中可能适合或不适合的动态文本，无论Flexbox配置或媒体查询如何。

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

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

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

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

将空间中的物品包裹在flexbox之间

2 个答案: