Question

我有一个通过flexbox设置的容器。我想平均分配容器内的每个瓷砖，但保持它们的固定宽度为220px。

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

我还设置了一些媒体查询，以便瓦片堆叠在某些断点上。

使用我目前的造型，可以将这些瓷砖保持在220px而不会拉伸吗？这可以通过flexbox完成吗？有没有像flexbox一样好的替代品？

.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

我想平均分配容器内的每个瓷砖   但保持它们的固定宽度为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

OR

您可能处于一个常见的问题：当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

Answer 2

因此，flexbox具有增长和缩小的能力，您可以关闭它（您可以阅读更多关于here的内容，我发现这是一个很好的，快速的Flexbox指南）。一次定义error: Ignoring attempt to bind route (/barn) to unknown view: barn.jade，flex-grow和flex-shrink的简写为flex-basis，零表示框不会增大或缩小，但保持相同的大小先前已定义。我修改了你的jsfiddle来展示它是如何工作的：

FIDDLE

Answer 3

在阅读了关于Michael_B回答的评论之后，我相信缺少的是一个合理的内容：中心......

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
  justify-content: center;
}

.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 220px;
}

.filler {
  border: 1px solid transparent;
  margin: 0 15px 0px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 0px;
  }

<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 class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

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

3 个答案: