如何对齐两个flex div的孩子？ [复制]

Question

我正在使用 flex 创建一个导航菜单。我希望我的菜单中的所有项目在屏幕足够宽以支持它时显示在一行中，并在需要换行时对齐到两行项目。我有这个主要工作：

.content {
  width: 400px;
  height: 150px;
  border: thin solid black;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.inner {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
}

span {
  font-size: 24pt;
}

<div class="content">
  <div class="outer">
    <div class="inner">
      <span>one</span>
      <span>two</span>
      <span>three</span>
    </div>
    <div class="inner">
      <span>four</span>
      <span>five</span>
      <span>six</span>
    </div>
  </div>
</div>

CodePen here.

当页面足够宽时，这非常有效：

当页面很窄时，它大部分完美地工作（尝试将.content的宽度更改为250px）：

但是，现在我正在尝试使每行中的项目彼此对齐。我要这样做：

我已经尝试了所有我能想到的 flex-grow、flex-shrink 和 justify-content 的组合，但我无法让这些项目对齐。

我知道当窗口变得太窄时，我可能会使用媒体查询并将内容换成网格，但我想尽可能简化这一点。有没有办法对齐两个 flex div 的孩子？

或者，有没有办法使用显示为 1 行的网格布局，直到需要换行，然后显示为 2 行？

Answer 1

它是由跨度宽度引起的。

如果跨度宽度不固定，跨度将具有动态宽度；

在跨度上设置宽度；

Answer 2

试试这个

添加到跨度

span {
   flex: 33%;
}

或者根据 div 拥有的项目数量更改 porcent