当前位置：首页 > article >正文

CSS 中flex - grow、flex - shrink和flex - basis属性的含义及它们在弹性盒布局中的协同作用。

article 2026/2/27 16:42:14

大白话CSS 中flex - grow、flex - shrink和flex - basis属性的含义及它们在弹性盒布局中的协同作用。

在 CSS 的弹性盒布局（Flexbox）里，flex-grow、flex-shrink 和 flex-basis 这三个属性对弹性元素的尺寸和伸缩性起着关键作用。下面为你详细解释这些属性的含义以及它们之间的协同作用。

各属性含义

flex-basis：此属性用于设定弹性元素的初始大小。可以把它看作是弹性元素在伸缩之前的“基础尺寸”。它能使用像 px、em 这类的固定单位，也可以用百分比或者 auto 来表示。若设置为 auto，元素的初始大小就会依据其内容来确定。
flex-grow：这个属性用来规定弹性元素在有多余空间时的扩展比例。它是一个无单位的数值，默认值为 0，这意味着元素不会主动扩展以填满多余空间。若设置为大于 0 的值，元素就会按比例扩展。例如，有两个元素，一个 flex-grow 为 1，另一个为 2，那么后者扩展的空间会是前者的两倍。
flex-shrink：该属性用于规定弹性元素在空间不足时的收缩比例。同样是无单位的数值，默认值为 1，表示元素会按照比例收缩。若设置为 0，元素就不会收缩。

代码示例及解释

以下是一个包含详细注释的代码示例，展示了这三个属性的协同作用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 设置弹性容器 */.flex-container {display: flex; /* 将元素设置为弹性容器 */width: 600px; /* 容器宽度为 600px */border: 1px solid black; /* 为容器添加黑色边框 */}/* 第一个弹性元素 */.flex-item1 {flex-basis: 100px; /* 初始大小为 100px */flex-grow: 1; /* 扩展比例为 1 */flex-shrink: 1; /* 收缩比例为 1 */background-color: lightblue; /* 背景颜色为浅蓝色 */}/* 第二个弹性元素 */.flex-item2 {flex-basis: 200px; /* 初始大小为 200px */flex-grow: 2; /* 扩展比例为 2 */flex-shrink: 2; /* 收缩比例为 2 */background-color: lightgreen; /* 背景颜色为浅绿色 */}/* 第三个弹性元素 */.flex-item3 {flex-basis: 300px; /* 初始大小为 300px */flex-grow: 0; /* 不扩展 */flex-shrink: 0; /* 不收缩 */background-color: lightcoral; /* 背景颜色为浅珊瑚色 */}</style>
</head><body><!-- 创建弹性容器 --><div class="flex-container"><!-- 第一个弹性元素 --><div class="flex-item1">Item 1</div><!-- 第二个弹性元素 --><div class="flex-item2">Item 2</div><!-- 第三个弹性元素 --><div class="flex-item3">Item 3</div></div>
</body></html>

代码解释

HTML 部分：构建了一个弹性容器 div，其类名为 flex-container，里面包含三个弹性元素 div，类名分别为 flex-item1、flex-item2 和 flex-item3。
CSS 部分：
- .flex-container：把 display 属性设为 flex，将该元素变为弹性容器，宽度设为 600px 并添加黑色边框。
- .flex-item1：初始大小是 100px，扩展比例为 1，收缩比例为 1，背景颜色为浅蓝色。
- .flex-item2：初始大小是 200px，扩展比例为 2，收缩比例为 2，背景颜色为浅绿色。
- .flex-item3：初始大小是 300px，扩展比例为 0，即不扩展，收缩比例为 0，即不收缩，背景颜色为浅珊瑚色。

协同作用

空间充足时：若容器宽度大于所有弹性元素的 flex-basis 之和，多余空间会按照 flex-grow 的比例分配给各元素。例如，上述示例中，若容器宽度大于 600px，多余空间会按 1:2:0 的比例分配给三个元素。
空间不足时：若容器宽度小于所有弹性元素的 flex-basis 之和，元素会按照 flex-shrink 的比例收缩。不过，flex-item3 的 flex-shrink 为 0，所以它不会收缩。

通过合理运用 flex-grow、flex-shrink 和 flex-basis 这三个属性，你就能精准控制弹性元素在不同空间条件下的尺寸和伸缩性。

flex-grow、flex-shrink和flex-basis属性在不同的浏览器中的兼容性如何？

flex-grow、flex-shrink 和 flex-basis 这些属性都属于 CSS Flexbox 布局模块的一部分。当前，它们在主流浏览器中拥有良好的兼容性，但在旧版本浏览器里可能存在一些问题。下面是这些属性在不同浏览器中的兼容性情况：

桌面浏览器

Chrome：从 Chrome 21 版本起就开始支持这些属性，当前最新版本对其支持良好。
Firefox：从 Firefox 22 版本起支持，当前版本支持完善。
Safari：从 Safari 6.1 版本起支持，但在旧版本中需要添加 -webkit- 前缀。比如，flex-grow 要写成 -webkit-flex-grow。
Opera：从 Opera 12.1 版本起支持，现在支持情况良好。
Edge：从 Edge 12 版本起支持，当前版本兼容性没问题。
Internet Explorer：IE 10 部分支持，使用时需要添加 -ms- 前缀，且实现方式与标准有所不同；IE 11 对其支持较好，但在某些复杂布局下可能会有问题。

移动浏览器

Chrome for Android：支持情况良好，从早期版本就开始支持。
Firefox for Android：支持完善，兼容性佳。
Safari on iOS：从 iOS 7 起支持，旧版本需 -webkit- 前缀。
Samsung Internet：支持良好，无明显兼容性问题。

兼容性处理建议

使用前缀：为了确保在旧版浏览器中的兼容性，可以添加浏览器前缀。示例如下：

.flex-item {-webkit-flex-grow: 1; /* Safari 6.1+ */-ms-flex-grow: 1; /* IE 10 */flex-grow: 1;-webkit-flex-shrink: 1; /* Safari 6.1+ */-ms-flex-shrink: 1; /* IE 10 */flex-shrink: 1;-webkit-flex-basis: 200px; /* Safari 6.1+ */-ms-flex-basis: 200px; /* IE 10 */flex-basis: 200px;
}

使用 Autoprefixer：这是一个自动添加浏览器前缀的工具，可集成到构建工具（如 Webpack、Gulp 等）中，这样在编写 CSS 时就无需手动添加前缀。
渐进增强：先为现代浏览器构建完整的 Flexbox 布局，再为旧版浏览器提供基本的布局方案，以此保证所有用户都能获得可用的体验。

总的来说，在开发中使用 flex-grow、flex-shrink 和 flex-basis 时，只要处理好旧版浏览器的兼容性问题，就能在大多数浏览器中实现一致的布局效果。

如何检测浏览器对这些属性的支持情况？

在前端开发中，检测浏览器对 flex-grow、flex-shrink 和 flex-basis 属性的支持情况，可通过以下几种方法实现：

1. 使用 Modernizr 库

Modernizr 是一个用于检测浏览器特性支持情况的 JavaScript 库。它会自动检测浏览器是否支持各种 HTML5 和 CSS3 特性，其中就包含 Flexbox 相关属性。

步骤：

引入 Modernizr 库：你可以从 Modernizr 官网下载该库，或者使用 CDN 引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

检测 Flexbox 支持情况：在页面加载完成后，Modernizr 会在 <html> 标签上添加相应的类名，以此表明浏览器对某个特性的支持情况。若支持 Flexbox，<html> 标签会添加 flexbox 类；若不支持，则添加 no-flexbox 类。

<!DOCTYPE html>
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script><style>/* 若支持 Flexbox，应用这些样式 */.flexbox .flex-container {display: flex;}/* 若不支持 Flexbox，应用这些样式 */.no-flexbox .flex-container {/* 提供替代布局方案 */}</style>
</head>
<body><div class="flex-container"><!-- 弹性元素 --></div>
</body>
</html>

2. 使用 JavaScript 进行特性检测

你可以通过创建一个临时的 DOM 元素，为其设置相关的 CSS 属性，然后检查这些属性是否被正确应用，以此来检测浏览器对某个属性的支持情况。

function isPropertySupported(property) {const element = document.createElement('div');if (property in element.style) {return true;}const propertyName = property.charAt(0).toUpperCase() + property.slice(1);const vendorPrefixes = ['Webkit', 'Moz', 'ms', 'O'];for (let i = 0; i < vendorPrefixes.length; i++) {if ((vendorPrefixes[i] + propertyName) in element.style) {return true;}}return false;
}// 检测 flex-grow 支持情况
const isFlexGrowSupported = isPropertySupported('flexGrow');
// 检测 flex-shrink 支持情况
const isFlexShrinkSupported = isPropertySupported('flexShrink');
// 检测 flex-basis 支持情况
const isFlexBasisSupported = isPropertySupported('flexBasis');console.log('flex-grow supported:', isFlexGrowSupported);
console.log('flex-shrink supported:', isFlexShrinkSupported);
console.log('flex-basis supported:', isFlexBasisSupported);

3. 使用 CSS @supports 规则

@supports 是 CSS 中的一个特性查询规则，用于检测浏览器是否支持某个 CSS 属性或值。

@supports (flex-grow: 1) {/* 若支持 flex-grow，应用这些样式 */.flex-container {display: flex;}
}@supports not (flex-grow: 1) {/* 若不支持 flex-grow，应用这些样式 */.flex-container {/* 提供替代布局方案 */}
}

你可以依据项目的实际需求和兼容性要求，选择合适的检测方法。若项目需要兼容多种特性，使用 Modernizr 库会比较方便；若仅需检测少数几个属性，使用 JavaScript 或 CSS @supports 规则会更合适。