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.mzph.cn/web/73054.shtml

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

相关文章

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…
阅读更多...
【HarmonyOS NEXT】关键资产存储开发案例

【HarmonyOS NEXT】关键资产存储开发案例

在 iOS 开发中 Keychain 是一个非常安全的存储系统&#xff0c;用于保存敏感信息&#xff0c;如密码、证书、密钥等。与文件系统不同&#xff0c;Keychain 提供了更高的安全性&#xff0c;因为它对数据进行了加密&#xff0c;并且只有经过授权的应用程序才能访问存储的数据。那…
阅读更多...
ccfcsp1901线性分类器

ccfcsp1901线性分类器

//线性分类器 #include<iostream> using namespace std; int main(){int n,m;cin>>n>>m;int x[1000],y[1000];char z[1000];for(int i0;i<n;i){cin>>x[i]>>y[i];cin>>z[i];}int a[20],b[20],c[20];for(int i0;i<m;i){cin>>a[i…
阅读更多...
Spring Boot 整合 OpenFeign 教程

Spring Boot 整合 OpenFeign 教程

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 Spring Boot 整合 OpenFeign 教程 一、OpenFeign 简介 OpenFeign 是 Netflix 开源的声明式 HTTP 客户端&#xff0c;通过接口和注解简化服务间 HTTP 调用。…
阅读更多...
APM 仿真遥控指南

APM 仿真遥控指南

地面站开发了一段时间了&#xff0c;由于没有硬件&#xff0c;所以一直在 APM 模拟器中验证。我们已经实现了 MAVLink 消息接收和解析&#xff0c;显示无人机状态&#xff0c;给无人机发送消息&#xff0c;实现一键起飞&#xff0c;飞往指定地点&#xff0c;降落&#xff0c;返…
阅读更多...
C语言入门教程100讲（4）输入输出

C语言入门教程100讲（4）输入输出

文章目录 1. 什么是输入输出&#xff1f;2. 标准输入输出函数2.1 printf 函数2.2 scanf 函数 3. 格式化占位符4. 示例代码代码解析&#xff1a;输出结果&#xff1a; 5. 常见问题问题 1&#xff1a;scanf 中的 & 是什么作用&#xff1f;问题 2&#xff1a;printf 和 scanf …
阅读更多...
《信息系统安全》（第一次上机实验报告）

《信息系统安全》（第一次上机实验报告）

实验一 &#xff1a;网络协议分析工具Wireshark 一 实验目的 学习使用网络协议分析工具Wireshark的方法&#xff0c;并用它来分析一些协议。 二实验原理 TCP/IP协议族中网络层、传输层、应用层相关重要协议原理。网络协议分析工具Wireshark的工作原理和基本使用规则。 三 实…
阅读更多...
城市街拍人像自拍电影风格Lr调色教程，手机滤镜PS+Lightroom预设下载！

城市街拍人像自拍电影风格Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程 城市街拍人像自拍的电影风格 Lr 调色&#xff0c;是利用 Adobe Lightroom 软件&#xff0c;对在城市街景中拍摄的人像自拍照片进行后期处理&#xff0c;使其呈现出电影画面般独特的视觉质感与艺术氛围。通过一系列调色操作&#xff0c;改变照片的色彩、明暗、对比等元…
阅读更多...
自学Python创建强大AI：从入门到实现DeepSeek级别的AI

自学Python创建强大AI：从入门到实现DeepSeek级别的AI

人工智能&#xff08;AI&#xff09;是当今科技领域最热门的方向之一&#xff0c;而Python是AI开发的首选语言。无论是机器学习、深度学习还是自然语言处理&#xff0c;Python都提供了丰富的库和工具。如果你梦想创建一个像DeepSeek这样强大的AI系统&#xff0c;本文将为你提供…
阅读更多...
Mac | Excel | 列数改为和行数一样用数字表示

Mac | Excel | 列数改为和行数一样用数字表示

2. 3.
阅读更多...
Qt/C++项目积累：4.远程升级工具 - 4.1 项目设想

Qt/C++项目积累：4.远程升级工具 - 4.1 项目设想

背景&#xff1a; 桌面程序一般都支持远程升级&#xff0c;也是比较常用的场景设计。如酷狗音乐的升级&#xff0c;会提供两个选项&#xff0c;自动帮助安装或是新版本提醒&#xff0c;由用户来决定是否升级&#xff0c;都属于远程升级的应用及策略。 看看经过这块的功能了解及…
阅读更多...
（一）丶Windows安装RabbitMQ可能会遇到的问题

（一）丶Windows安装RabbitMQ可能会遇到的问题

一丶可能会忘了配置ERLang的环境变量 二丶执行命令时报错 第一步 rabbitmq-plugins enable rabbitmq_management 第二部 rabbitmqctl status 三丶修改.erlang.cookie 文件 1.找到C盘目下的.erlang.cookie文件 C:\Users\admin\.erlang.cookie C:\Windows\System32\config\sys…
阅读更多...
Amdahl 定律

Amdahl 定律

Amdahl 定律是用来表示&#xff0c;当提高系统某部分性能时对整个系统的影响&#xff0c;其公式如下&#xff1a; a表示我们提升部分初始耗时比例&#xff0c;k是我们的提升倍率&#xff0c;通过这个公式我们可以轻松的得知对每一部分的提醒&#xff0c;对整个系统带来的影响…
阅读更多...
HW华为流程管理体系精髓提炼华为流程运营体系（124页PPT）（文末有下载方式）

HW华为流程管理体系精髓提炼华为流程运营体系（124页PPT）（文末有下载方式）

资料解读&#xff1a;HW华为流程管理体系精髓提炼华为流程运营体系&#xff08;124页PPT&#xff09; 详细资料请看本解读文章的最后内容。 华为作为全球领先的科技公司&#xff0c;其流程管理体系的构建与运营是其成功的关键之一。本文将从华为流程管理体系的核心理念、构建…
阅读更多...
Powershell WSL导出导入ubuntu22.04.5子系统

Powershell WSL导出导入ubuntu22.04.5子系统

导出Linux子系统 导出位置在C盘下，根据自己的实际情况更改即可Write-Host "export ubuntu22.04.5" -ForegroundColor Green wsl --export Ubuntu-22.04 c:\Ubuntu-22.04.tar 导入Linux子系统 好处是目录可用在任意磁盘路径，便于迁移不同的设备之间Write-Host &quo…
阅读更多...
【Attention】SKAttention

【Attention】SKAttention

SKAttention选择核注意力 标题&#xff1a;SKAttention 期刊&#xff1a;IEEE2019 代码&#xff1a; https://github.com/implus/SKNet 简介&#xff1a; 动机:增大感受野来提升性能、多尺度信息聚合方式解决的问题&#xff1a;自适应调整感受野大小创新性:提出选择性内核…
阅读更多...
解决Popwindow宽高的问题。

解决Popwindow宽高的问题。

问题 在使用Popwindow进行自定义的过程中&#xff0c;需要设置popwindow的宽高。但是宽高很多时候容易出问题。比如下面的例子。 布局文件如下 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.andr…
阅读更多...
MySQL数据库精研之旅第二期：库操作的深度探索

MySQL数据库精研之旅第二期：库操作的深度探索

专栏&#xff1a;MySQL数据库成长记 个人主页&#xff1a;手握风云 目录 一、查看数据库 二、创建数据库 2.1. 语法 2.2. 示例 三、字符集编码和校验(排序)规则 3.1. 查看数据库支持的字符集编码 3.2. 查看数据库支持的排序规则 3.3. 不同的字串集与排序规则对数据库的…
阅读更多...
基于deepseek的智能语音客服【第四讲】封装milvus数据库连接池封装

基于deepseek的智能语音客服【第四讲】封装milvus数据库连接池封装

通过工厂模式创建链接 static {// 创建连接池工厂BasePooledObjectFactory<MilvusServiceClient> factory new BasePooledObjectFactory<MilvusServiceClient>() {Overridepublic MilvusServiceClient create() throws Exception {return new MilvusServiceClient…
阅读更多...
STM32基础教程——定时器

STM32基础教程——定时器

前言 TIM定时器&#xff08;Timer&#xff09;:STM32的TIM定时器是一种功能强大的外设模块&#xff0c;通过时基单元&#xff08;包含预分频器、计数器和自动重载寄存器&#xff09;实现精准定时和计数功能。其核心原理是&#xff1a;内部时钟&#xff08;CK_INT&#xff09;或…
阅读更多...
最新文章

Copyright @ 2022~2023