具有固定列宽的流体flexbox网格

我想平均分配容器内的每个瓷砖,但保持它们的固定宽度为220px.

我目前的造型是否可以将这些瓷砖保持在220px而不会拉伸？

这可以通过flexbox完成吗？

是的,是的.

而不是使用flex-grow和min-width在瓷砖上,使用该flex属性.

所以,而不是:

.tiles {
    flex-grow: 1;
    min-width: 220px;
}

试试这个:

.tiles {
    flex: 0 0 220px; /* don't grow, don't shrink, stay at 220px width */
}

该flex属性是简写flex-grow,flex-shrink,flex-basis.

该flex-grow属性控制当分配额外空间时,flex项相对于容器中其他flex项的增长方式.通过将值设置为0,它根本不会从初始主要大小(由定义flex-basis)增长.

该flex-shrink属性控制Flex项在溢出容器时相对于其他flex项的收缩方式.通过将值设置为0,它根本不会从初始主要大小(由定义flex-basis)缩小.

该flex-basis属性设置弹性项的初始主要大小.

我还设置了一些媒体查询,以便瓦片堆栈在某些断点上.

通过使用flex上面指定的属性以及flex-wrap代码中已有的属性,您可能不需要媒体查询.考虑报废它们.

此时,您可能有您的布局:DEMO

要么

您可能处于一个共同的关键点:当Flex项目换行时,容器不会重新计算其宽度以收缩包装较少的列,从而导致右侧有大面积的空白区域.

有关更多详细信息和可能的解决方法,请参阅我的答案:Flexbox限制与挑战

UPDATE

在评论中做了一些澄清和修改之后,找到了解决方案:

HTML

    

    

    

            ...
            ...
            ...

CSS

*
{
    margin:0;padding:0;
}

#content {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin:0 auto;
}
.box {
    flex: 0 0 90px;
    height: 90px;
    margin: 5px;
    background-color: blue;
}

@media (min-width: 200px) {
  #content {
    width: 200px;
  }
}
@media (min-width: 300px) {
  #content {
    width: 300px;
  }
}
@media (min-width: 400px) {
  #content {
    width: 400px;
  }
}
@media (min-width: 500px) {
  #content {
    width: 500px;
  }
}
@media (min-width: 600px) {
  #content {
    width: 600px;
  }
}
@media (min-width: 700px) {
  #content {
    width: 700px;
  }
}
@media (min-width: 800px) {
  #content {
    width: 800px;
  }
}
@media (min-width: 900px) {
  #content {
    width: 900px;
  }
}
@media (min-width: 1000px) {
  #content {
    width: 1000px;
  }
}
@media (min-width: 1100px) {
  #content {
    width: 1100px;
  }
}

DEMO