使用 Flexbox 收缩父级

Flexbox 是一种 CSS 布局技术，它可以使一个容器中的项目按照一定的规则排列和对齐。在使用 Flexbox 时，有时候我们需要将一个容器的大小自适应其内部的元素，这时候就需要用到 Flexbox 的收缩功能。

如何使用 Flexbox 收缩父级？

要使用 Flexbox 收缩父级，我们需要给父级容器设置一个 display: flex; 的样式，然后通过设置 flex-shrink 属性来控制该容器中的项目在空间不足时是否收缩。

.container {
  display: flex;
}

.item {
  flex-shrink: 1; /* 默认值 */
}

在上面的示例中，我们使用了 display: flex; 将 .container 容器设置为 Flex Container。然后，我们给 .item 元素设置了 flex-shrink: 1; 的样式，表示这些元素在空间不足的情况下可以收缩。

接下来，我们可以通过设置 .item 元素的 width 属性来控制在正常情况下它们所占用的空间。当容器的空间不足时，由于 flex-shrink 的存在，这些元素会自动收缩，直到它们可以适应容器中的剩余空间。

利用 Flexbox 收缩父级进行自适应布局

使用 Flexbox 收缩父级可以实现自适应布局的效果，使得整个容器能够根据子元素的大小自动调整大小。

<div class="container">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* 多行布局 */
}

.item {
  flex-shrink: 1;
  width: 50%;
  height: 200px;
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* 单行布局 */
  }
}

上面的示例中，我们给 .container 容器设置了 flex-wrap: wrap; 的样式，表示该容器可以在必要的时候换行显示子元素。然后，我们通过给 .item 元素设置一定的宽度和高度来控制其大小。

当窗口的宽度小于 768px 时，我们使用媒体查询将 .item 元素的宽度改为 100%，这样就可以保证在窄屏幕上正常显示。

总结

Flexbox 是一种强大的 CSS 布局技术，它可以使得页面布局更加灵活、自适应。通过使用 Flexbox 的收缩功能，我们可以使得容器能够根据子元素的大小自动调整大小，从而实现更加优雅的布局效果。