解构煎饼

这是营销网站很常见的布局，例如，网站可能会有一行包含 3 件商品的信息，其中通常包含 1 张图片、1 个商品名，然后是一些文字，用于描述商品的某些功能。在较小的屏幕上，您会希望这些元素能够很好地堆叠在一起，并随着屏幕尺寸的增大而扩展。

通过使用 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> 为 150px：

.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;
}