css - Flexbox 元素不会设置为行

Question

我正在使用 Flexbox 构建我的作品集。我首先在移动 View 中编写它并且效果很好。当我将窗口调整为全尺寸时，我希望这些元素水平排列(我设置了 flex-flow:row wrap;)但它们留在一列中。

我已经尝试调整图像本身的大小并调整边距/填充/等，但每一行都不会超过一个元素。理想情况下，每行可容纳 3-4 个元素。

.projects {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
}

.item {
    border:1px solid white;
    padding:5%;
    margin:5% auto;
}

.item img {
    max-width:100%;
    height:auto;
}

.caption {
    font-size:0.75rem;
    border-top:1px solid white;
    width:80%;
    margin:0 auto;
}

完整代码在这里: http://codepen.io/duggalsf/pen/bwjpLo

任何建议都会有所帮助。 (如果我只需要进行媒体查询，也请告诉我，我被告知使用 Flexbox 网格不需要媒体查询)谢谢!

Answer 1

请更改此类:-

.item {
   border:1px solid white;
   padding:5%;
   margin:5% auto;
   display:inline-block; /* add this class */
}