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

大白话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 相关属性。

步骤：
  1. 引入 Modernizr 库：你可以从 Modernizr 官网 下载该库，或者使用 CDN 引入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  1. 检测 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 规则会更合适。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/38518.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

第2.2节 Android Jacoco插件覆盖率采集

第2.2节 Android Jacoco插件覆盖率采集

JaCoCo&#xff08;Java Code Coverage&#xff09;是一款开源的代码覆盖率分析工具&#xff0c;适用于Java和Android项目。它通过插桩技术统计测试过程中代码的执行情况&#xff0c;生成可视化报告&#xff0c;帮助开发者评估测试用例的有效性。在github上开源的项目&#xff…
阅读更多...
OpenGL ES -＞乒乓缓冲，计算只用两个帧缓冲对象(Frame Buffer Object)+叠加多个滤镜作用后的Bitmap

OpenGL ES -＞乒乓缓冲，计算只用两个帧缓冲对象(Frame Buffer Object)+叠加多个滤镜作用后的Bitmap

乒乓缓冲核心思想 不使用乒乓缓冲&#xff0c;如果要每个滤镜作用下的绘制内容&#xff0c;也就是这个滤镜作用下的帧缓冲&#xff0c;需要创建一个Frame Buffer Object加上对应的Frame Buffer Object Texture使用乒乓缓冲&#xff0c;只用两个Frame Buffer Object加上对应的F…
阅读更多...
Unity导出WebGL，无法加载，data文件无法找到 404（NotFound）

Unity导出WebGL，无法加载，data文件无法找到 404（NotFound）

问题&#xff1a;data文件无法找到404Not found 示例是使用IIS托管启动 F12可以看到not found 的报错 解决办法&#xff1a; iis无法识别data文件&#xff0c;在MIME类型中增加data 类型&#xff1a;application/octet-stream 添加之后&#xff0c;会在根目录下生产一个…
阅读更多...
C++与OO思想的联系

C++与OO思想的联系

一、C与OO思想的联系 C&#xff1a;OO思想&#xff08;面向对象--属性和行为&#xff09; 任何事务都可以被看做一个个对象&#xff0c;一个再复杂的模型结构都是由千千万万个对象组成。 OO思想两个要素&#xff1a;属性和行为(方法)。 OO思想的特点&#xff1a; 封装&#x…
阅读更多...
单表达式倒计时工具：datetime的极度优雅（DeepSeek）

单表达式倒计时工具：datetime的极度优雅（DeepSeek）

一个简单表达式&#xff0c;也可以优雅自成工具。 笔记模板由python脚本于2025-03-22 20:25:49创建&#xff0c;本篇笔记适合任意喜欢学习的coder翻阅。 【学习的细节是欢悦的历程】 博客的核心价值&#xff1a;在于输出思考与经验&#xff0c;而不仅仅是知识的简单复述。 Pyth…
阅读更多...
Kubernetes的Replica Set和ReplicaController有什么区别

Kubernetes的Replica Set和ReplicaController有什么区别

ReplicaSet 和 ReplicationController 是 Kubernetes 中用于管理应用程序副本的两种资源&#xff0c;它们有类似的功能&#xff0c;但 ReplicaSet 是 ReplicationController 的增强版本。 以下是它们的主要区别&#xff1a; 1. 功能的演进 ReplicationController 是 Kubernete…
阅读更多...
CSS基础知识一览

CSS基础知识一览

持续维护 选择器 display 常用属性 浮动 弹性布局
阅读更多...
IS-IS原理与配置

IS-IS原理与配置

一、IS-IS概述 IS-IS&#xff08;Intermediate System to Intermediate System&#xff0c;中间系统到中间系统&#xff09;是ISO&#xff08;International Organization for Standardization&#xff0c;国际标准化组织&#xff09;为它的CLNP&#xff08;ConnectionLessNet…
阅读更多...
【前端】Visual Studio Code安装配置教程：下载、汉化、常用组件、基本操作

【前端】Visual Studio Code安装配置教程：下载、汉化、常用组件、基本操作

文章目录 一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2、view-in-browser3、Live Server 四、基本操作五、感谢观看&#xff01; 一、Visual Studio Code下载 下载官网&#xff1a;https://code.visualstudio.com/ 进入官网后点击右上角的Download &…
阅读更多...
git推送代码相关学习——（一）

git推送代码相关学习——（一）

推荐去阅读一下廖老师的git相关的教程https://liaoxuefeng.com/books/git/introduction/index.html 这个系列就来学习一下git操作。 第一步&#xff0c;新建项目 去github中新建一个项目&#xff0c;然后依据项目来进行本地的开发工作。 第二步&#xff0c;拉取项目 git c…
阅读更多...
CMS网站模板设计与用户定制化实战评测

CMS网站模板设计与用户定制化实战评测

内容概要 在数字化转型背景下&#xff0c;CMS平台作为企业内容管理的核心载体&#xff0c;其模板架构的灵活性与用户定制能力直接影响运营效率。通过对WordPress、Baklib等主流系统的技术解构发现&#xff0c;模块化设计理念已成为行业基准——WordPress依托超过6万款主题库实…
阅读更多...
Maya基本操作

Maya基本操作

基本操作 按住ALT键&#xff0c;左键旋转视角&#xff0c;中键平移视角&#xff0c;右键放大缩小视角。 按空格键切换4格视图。 导入FBX格式文件后&#xff0c;无贴图显示。 按6键开启。着色纹理显示 坐标轴相关 修改菜单-左键最上面的虚线。固定修改选项窗口。 选中物体…
阅读更多...
政安晨【超级AI工作流】—— 使用Dify通过工作流对接ComfyUI实现多工作流协同

政安晨【超级AI工作流】—— 使用Dify通过工作流对接ComfyUI实现多工作流协同

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 目录 一、准备工作 Dify跑起来 ollama局域网化配置 Dify配置并验证 启动ComfyUI 二、…
阅读更多...
【蓝桥杯】12111暖气冰场（多源BFS 或者 二分）

【蓝桥杯】12111暖气冰场（多源BFS 或者 二分）

思路 这题可以用BFS做&#xff0c;也可以用二分来做。 用二分这里只提供一个思路&#xff1a;对时间来二分查找&#xff0c;check函数就是检查在特定的时间 t 0 t_0 t0​内每一个暖气炉的传播距离能否覆盖所有格子。 用BFS做&#xff1a; 由几个点开始向外扩散&#xff0c;知道…
阅读更多...
【云上CPU玩转AIGC】——腾讯云高性能应用服务HAI已支持DeepSeek-R1模型预装环境和CPU算力

【云上CPU玩转AIGC】——腾讯云高性能应用服务HAI已支持DeepSeek-R1模型预装环境和CPU算力

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大三学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…
阅读更多...
【JavaEE】网络编程socket

【JavaEE】网络编程socket

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…
阅读更多...
超硬核区块链算法仿真：联盟链PBFT多线程仿真实现 ：c语言完全详解版

超硬核区块链算法仿真：联盟链PBFT多线程仿真实现 ：c语言完全详解版

1 22年年底想用gpt做出一个pbft的算法仿真&#xff0c;到了25年终于可以结合gpt grok perplexcity deepseek等实现了&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 1.1简化版 // 定义 Windows 版本&#xff0c;确保条件变量相关函数可用 #define _WIN32_W…
阅读更多...
【并发编程】聊聊forkJoin的原理和最佳实践

【并发编程】聊聊forkJoin的原理和最佳实践

对于线程池来说&#xff0c;其实本质就是一个生产者消费者的模式&#xff0c;而通过竞争的方式从队列中获取任务执行。本质上其实就是按照任务级别进行处理&#xff0c;但是对于一些可以分而治之的任务&#xff0c;传统的线程池没有办法分治处理。一是无法对大任务进行拆分&…
阅读更多...
【数据预测】基于遗传算法GA的LSTM光伏功率预测 GA-LSTM光伏功率预测【Matlab代码#91】

【数据预测】基于遗传算法GA的LSTM光伏功率预测 GA-LSTM光伏功率预测【Matlab代码#91】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第6节&#xff1a;资源获取】1. 遗传算法GA2. 长短期记忆网络LSTM3. 基于GA-LSTM的光伏功率预测4. 部分代码展示5. 运行结果展示6. 资源获取 【可更换其他算法&#xff0c;获取资源请见文章第6节&#xff1a;资源获取】 …
阅读更多...
Java 填充 PDF 模版

Java 填充 PDF 模版

制作 PDF 模版 安装 OnlyOffice 从 OnlyOffice 官网下载 OnlyOffice Desktop&#xff0c;安装过程很简单&#xff0c;一路下一步即可。用 OnlyOffice 制作 PDF 模版&#xff08;表单&#xff09; 使用 OnlyOffice 表单设计器&#xff0c;制作表单&#xff0c;如下图 注意命名…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023