Flexbox响应式布局对齐

Question

使用Flexbox让布局正确响应时遇到一些麻烦。

想象一下只包含一些面板的页面。 目标是显示x个数量的面板/行，对齐水平＆amp;与其他人一样垂直。

我目前面临的问题是面板从行切换时的对齐方式。试图将面板直接对准上面的面板，但这根本没有用。

我的结果到目前为止：

桌面

平板电脑 （在这里你会看到对齐的问题（我应该在左上方的一个......）

电话

代码 （简化）

<div class="container">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</div>

-

.container {
  display: flex;
  flex-flow: row wrap;
  max-width: 960px;
  justify-content: space-around;

  .item {
    margin-top: 24px;
    width: 264px;
    height: 183px;
    background: red;
  }
}

Answer 1

为justify-content: space-between;

尝试space-around而不是.container