适用于所有屏幕尺寸的 Flexbox 响应式产品网格

Question

我有一个产品网格，其中每个网格的宽度为 200 像素。我只希望它适用于所有屏幕尺寸。

我当前的屏幕尺寸是 1366px。移动到以上屏幕尺寸将在右侧留下白色 space。

flexbox justify-content: flex-start.

#content {
  display: flex;
  flex-wrap: wrap;
}

.tile {
  height: 100px;
  background: pink;
  width: 200px;
}

<div id="content">
  <div class="tile">1</div>
  <div class="tile">2</div>
  <div class="tile">3</div>
  <div class="tile">4</div>
  <div class="tile">5</div>
  <div class="tile">6</div>
  <div class="tile">7</div>
  <div class="tile">8</div>
  <div class="tile">9</div>
  <div class="tile">10</div>
  <div class="tile">11</div>
  <div class="tile">12</div>
  <div class="tile">13</div>
  <div class="tile">14</div>
  <div class="tile">15</div>
  <div class="tile">16</div>
</div>

Answer 1

如果您的产品网格旨在填充屏幕的水平宽度而不管屏幕分辨率如何，您可以选择 "fluid" 网格。

"fluid" 网格将保留其结构和 "stretch to fit" 父容器的宽度（或屏幕分辨率），无论是什么：

#content {
  display: flex;
  flex-wrap: wrap;
}

.tile {
  height: 100px;
  background: pink;

  /* 
  Specify percentage based with causes tile width to update dynamically
  based on current width of parent. A width of 25% causes four tiles per 
  row.
  width: 25%;
  */

  /* For 6 tiles per row */
  width: 16.6%;
 
}

<div id="content">
  <div class="tile">1</div>
  <div class="tile">2</div>
  <div class="tile">3</div>
  <div class="tile">4</div>
  <div class="tile">5</div>
  <div class="tile">6</div>
  <div class="tile">7</div>
  <div class="tile">8</div>
  <div class="tile">9</div>
  <div class="tile">10</div>
  <div class="tile">11</div>
  <div class="tile">12</div>
  <div class="tile">13</div>
  <div class="tile">14</div>
  <div class="tile">15</div>
  <div class="tile">16</div>
  <div class="tile">17</div>
  <div class="tile">18</div>
</div>

适用于所有屏幕尺寸的 Flexbox 响应式产品网格

Flexbox responsive product grid for all screen sizes

css

cross-browser

flexbox

responsive