Question

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

＆＃13;

.grid-container {
  width: 480px; /* Max */
  display: flex;
  flex-flow: row wrap;
}

.grid-cell {
  flex: 1;
  background: #ccc;
  width: 50%
}

＆＃13;

<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>

＆＃13;

这样可行但图像不会随着网格变小而调整大小，如果我添加.grid-cell img { width: 100%;}单元格全部适合一行。如果我带走.grid-cell {width: 50%;}同样的事情。

奇怪的是，在Firefox中我实现了预期的效果;网格按比例缩小。在Chrome和Safari中，即使使用-webkit-语法，它的行为与上面相同。当网格变窄并且图像溢出时，每个单元的高度保持不变。

Answer 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>

Flexbox网格比例缩放

1 个答案: