文章标签

Flexbox 虽然很棒，但它在幕后所做的事情实际上有点奇怪，因为默认情况下，它同时做了两件事。它首先查看内容大小，这正是我们在元素上声明 `width: max-content` 时会得到的结果。但除此之外，`flex-shrink` 也在发挥作用，允许项目变小，但仅在需要时。让我们将这两者分解并看看它们是如何协同工作的。

当您将 CSS 属性应用于元素时，幕后会发生很多事情。例如，假设我们有一些像这样的 HTML

<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div

…

有趣的事实：完全可以创建无需任何媒体查询的响应式组件。当然，如果我们有 容器查询，它们将非常适合组件级别的响应式设计。但我们没有。尽管如此，无论是否有……

简短回答：flex-shrink 和 flex-basis 可能就是您正在寻找的……