大白话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 规则会更合适。