Flexbox 项目不会设置为行答案

【问题标题】：Flexbox items won't set to rowFlexbox 项目不会设置为行
【发布时间】：2017-02-23 09:42:34
【问题描述】：

我正在使用 Flexbox 构建我的作品集。我首先在移动视图中编写了它，并且效果很好。当我将窗口大小调整为全尺寸时，我希望项目水平排列（我设置了 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 网格不需要媒体查询）谢谢！

【问题讨论】：

标签： css responsive-design flexbox

【解决方案1】：

请更改此类：-

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

【讨论】：

【解决方案2】：

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

你必须使用 .projects ul 而不是 .projects。这是工作的Fiddle

【讨论】：