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

Question

我有一个通过 flexbox 设置的容器。我想平均分配容器内的每个图 block ，但将它们保持在 220 像素的固定宽度。

我已经接近使用 flex-grow 并设置 min-width: 220px，但它显然已经通过计算调整了图 block 的大小以填充容器。

我还设置了一些媒体查询，以便磁贴在特定断点处堆叠。

根据我当前的样式，是否可以将这些图 block 保持在 220 像素而不拉伸(stretch)它们？这可以通过 flexbox 完成吗？是否有与 flexbox 一样好的替代方案？

Fiddle

.container {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
}
.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex-grow: 1;
  padding: 0;
  height: 220px;
  min-width: 220px;
}
@media screen and (max-width: 1140px) {
  .container {
    max-width: 850px;
  }
}
@media screen and (max-width: 2040px) {
  .container {
    max-width: 1750px;
  }
}
@media screen and (max-width: 1790px) {
  .container {
    max-width: 1500px;
  }
}
@media screen and (max-width: 1540px) {
  .container {
    max-width: 1250px;
  }
}
@media screen and (max-width: 1290px) {
  .container {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1040px) {
  .container {
    max-width: 750px;
  }
}
@media screen and (max-width: 790px) {
  .container {
    max-width: 500px;
  }
}

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
</div>

Answer 1

I'd like to equally distribute each of the tiles inside the container but keep them at a fixed width of 220px.

With my current styling is it possible to keep these tiles at 220px without them stretching?

Can this be done via flexbox?

是的，是的。

不要在图 block 上使用 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 元素的初始主要尺寸。

---

I've also setup some media queries so that the tiles stack on certain breakpoints.

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

---

此时，您的布局可能是:DEMO

或

您可能遇到了一个共同的症结:当 flex 元素换行时，容器不会重新计算其宽度以收缩换行较少的列，从而导致 large area of whitespace on the right .

有关更多详细信息和可能的解决方法，请在此处查看我的回答:Flexbox Limitation & Challenge

---

更新

在评论中进行了一些澄清和修改后，找到了解决方案:

HTML

<ul id="content">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
            ...
            ...
            ...
</ul>

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