Flexbox 网格比例缩放答案

【问题标题】：Flexbox grid proportional scalingFlexbox 网格比例缩放
【发布时间】：2016-03-11 02:18:04
【问题描述】：

我有一个 flexbox 布局，它实际上是 3 x 3 但我可以用 2 x 2 Fiddle 来说明

.grid-container {
  width: 480px; /* Max */
  display: flex;
  flex-flow: row wrap;
}

.grid-cell {
  flex: 1;
  background: #ccc;
  width: 50%
}

<div class="grid-container">
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
</div>

这样可以，但图像不会随着网格变小而调整大小，如果我添加.grid-cell img { width: 100%;}，则所有单元格都适合一行。如果我拿走.grid-cell {width: 50%;}，也会发生同样的情况。

奇怪的是，在 Firefox 中达到了我想要的效果；网格按比例缩小。在 Chrome 和 Safari 中，即使使用 -webkit- 语法，它的行为也与上述相同。随着网格变窄和图像溢出，每个单元格的高度保持不变。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

代替width: 33% 试试flex: 0 0 33%

.grid-container {
  display: flex;
  flex-flow: row wrap;
}

.grid-cell {
  flex: 0 0 33%;
  background: #ccc;
  box-sizing: border-box;
  padding: 5px;
}

img {
  width: 100%;
}

<div class="grid-container">
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
  <div class="grid-cell"><img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/></div>
</div>

【讨论】：

所以，将 flex 分开意味着“不要相对于你的兄弟姐妹缩小，不要增长....但占据 33% 的空间”？谢谢你。当你看到它时很明显。我在比例网格系统上找不到其他任何东西，所以也许这个问题可以成立。
是的，如果您可能想要 2 个图像网格，您只需使用 flex: 0 0 50% 等等 jsfiddle.net/j43wsnfm/6。并且width: 100% 图像将适合弹性项目。