Question

我正在尝试基于flexbox创建网格布局：

＆＃13;

.container {
  width: 360px; /* Try to change this. Possible values: 240px, 360px, 480px.*/
  background: #eee;
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px;
}

.cell {
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 120px;
  max-width: 120px;
}

.cell.wide {
  flex: 1 0 120px;
  max-width: 240px;
}

.inner {
  background: red;
  height: 100px;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.wide .inner {
  background: blue;
}

＆＃13;

<div class="container">
  <div class="cell">
    <div class="inner">1</div>
  </div>
  <div class="cell wide">
    <div class="inner">2</div>
  </div>
  <div class="cell">
    <div class="inner">3</div>
  </div>
  <div class="cell">
    <div class="inner">4</div>
  </div>
  <div class="cell wide">
    <div class="inner">5</div>
  </div>
  <div class="cell">
    <div class="inner">6</div>
  </div>
  <div class="cell wide">
    <div class="inner">7</div>
  </div>
  <div class="cell">
    <div class="inner">8</div>
  </div>
  <div class="cell">
    <div class="inner">9</div>
  </div>
  <div class="cell">
    <div class="inner">10</div>
  </div>
  <div class="cell">
    <div class="inner">11</div>
  </div>
  <div class="cell wide">
    <div class="inner">12</div>
  </div>
  <div class="cell">
    <div class="inner">13</div>
  </div>
</div>

＆＃13;

This JSFiddle有助于说明我的问题。

容器元素.container可以包含任意数量的单元格.cell。有两种类型的单元格：一个具有固定宽度的常规单元格（jsfiddle中的红色单元格）和宽一个单元格.cell.wide（蓝色单元格），宽度是两倍，但可以缩小到常规宽度单元格如果当前行中没有足够的空间。每行必须完全填充。

所以在示例中（见小提琴）：

Cell ＃2 应该很宽，并将＃3 推到下一行。
在第二行，其中包含＃3 ，＃4 和＃5 ，单元格＃5 应保持小，因为没有更大的单元格的空间，行应该完全填充。
等

顺便说一下：网格容器的宽度可变，因此行可以包含两到四个单元格。您可以通过将宽度更改为指定的可能值来尝试这一点。

在整个上午的小提琴中尝试并尝试了flex，width，min-width和max-width属性的多种组合后，我绝对需要你的帮助！提前谢谢！

我已经有了一个Javascript解决方法（计算列和添加类），但更喜欢仅使用CSS的解决方案。

Answer 1

我相信答案是Flexbox无法满足您的需求。原因是尺寸调整算法（简化术语）使用几个步骤来确定元素的实际大小：

确定首选最小大小（如果设置为长度/百分比，则为flex-basis的值;如果声明为auto，则为主轴大小的值;如果不是，则为最小内容大小）。在您的情况下，.cell和.cell.wide都更喜欢120px。
将项目放置为具有首选尺寸。
评估每个结果行（在包装弹性流中）并确定任何剩余空间。
根据flex-grow分配剩余空间（每行）。

在您的情况下，这意味着每个项目（无论是否.wide）都将评估为120px的首选大小，因此每行适合3个项目。此时，flex-grow因素无效，因为没有任何空间可以增长，因此.wide项的flex-grow为1的事实无关紧要。我认为你的例子需要一种形式的“有时min-width，有时候不是”flexbox不会做的行为 - 浏览器会有太多的布局传递（例如，多次回流成行等）

我能想到的唯一基于CSS的解决方案是将所有可能的场景硬编码到类似于"Quantity Queries"的东西中，但这样会很快变得笨拙......

最接近我可以使用flexbox获得类似https://jsfiddle.net/qde5xq09/1/的内容。

Flexbox网格：细胞不会成长

1 个答案: