Question

我正在使用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网格不需要媒体查询）谢谢！

Answer 1

请更改此课程： -

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

Answer 2

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

您必须使用 .projects ul 而不是 .projects 。继承人工作Fiddle

Flexbox项目不会设置为行

2 个答案: