Flexbox响应式布局对齐

Question

使用Flexbox正确响应布局会有一些麻烦。

想象一下仅包含一些面板的页面。 目标是显示x数量的面板/行，与其他行垂直对齐的水平面&。

问题我目前面临的是面板从行切换时的对齐方式。试图将面板直接对齐上面的面板，但这根本不能解决问题。

我的结果至今：

桌面

平板（在这里你会看到对齐问题（我应该是正下方左上角之一。 ..））

电话

代码（简体）

<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