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

Salman Razak |

我有一个产品网格，其中每个网格的宽度为200像素。我希望它能在所有屏幕尺寸上工作。

我当前的屏幕尺寸是1366px。移至上述屏幕尺寸时，右侧将留有空白。

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>

达克里·丹尼

如果目的是让产品网格填充屏幕的水平宽度，而不考虑屏幕分辨率，则可以选择“流体”网格。

“流体”网格将保留其结构并“拉伸以适应”父容器的宽度（或屏幕分辨率），无论如何：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。