相关文章标签

使用 Flexbox 实现等宽列：比你想象的更复杂

Flexbox 虽然很棒，但它在幕后做的事情实际上有点奇怪，因为默认情况下，它同时做了两件事。它首先查看内容大小，这与我们在元素上声明 `width: max-content` 时获得的结果相同。但除此之外，`flex-shrink` 还在做一些工作，允许项目变小，但仅在需要时才会变小。让我们分解这两个步骤，看看它们如何协同工作。

Kevin Powell 于 2022 年 9 月 22 日

flex-basis flex-grow flex-shrink flexbox

理解 flex-grow、flex-shrink 和 flex-basis

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

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

…

Robin Rendle 于 2022 年 10 月 18 日

clamp flex-basis flex-grow fluid type object-fit responsive

如何制作一个无媒体查询的响应式卡片组件

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

Geoffrey Crofte 于 2021 年 8 月 3 日

flex-grow flex-shrink flexbox max

宽度圣洁信天翁

Heydon 的圣洁信天翁是一种技术，可以使一排元素在特定宽度下断开并变成一列元素。一个指定父 宽度，而不是像媒体查询那样的屏幕宽度。因此，就像一个容器……

Chris Coyier 于 2020 年 7 月 24 日

flex-grow flexbox

flex-grow

flex-grow 属性是弹性盒布局模块的一个子属性。

它定义了弹性项目在需要时增长的能力。它接受一个无单位的值，该值用作比例。它规定了…

Chris Coyier 于 2021 年 8 月 4 日