解构煎饼

例如，这是营销网站的常见布局，可能包含一行三项内容，通常包括图片、商品名，以及一些文字来描述商品的某些特性。在小屏设备上，您希望这些内容能够整齐地堆叠，并随着屏幕尺寸的增大而展开。

通过使用 Flexbox 实现此效果，您无需在屏幕大小调整时使用媒体查询来调整这些元素的位置。

flex 简写表示：flex: <flex-grow> <flex-shrink> <flex-basis>。

flex-grow 拉伸

如果您希望框在换行时拉伸并填充空白，请将 <flex-grow> 的值设置为 1，例如：

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

现在，当您增大或缩小屏幕大小时，这些 Flex 内容会缩小和放大。

不拉伸

如果您希望框填充到 <flex-basis> 大小，在较小的尺寸上缩小，但不会拉伸以填充任何额外的空间，请编写：flex: 0 1 <flex-basis>。在本例中，<flex-basis> 为 150 像素：

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}