当前位置: 首页 > news >正文

flex-shrink和felx-grow

本文就是简单的介绍下flex-shrink和felx-grow的作用和计算方式吧;关于这个介绍也是很多;

  1. flex-shrink

flex-shrink是flex布局中的一种方式,简单来说,就是当布局大小小于容器大小的时候,使用flex-shrink能够按照一定的比例进行压缩。比如有一个500px的容器,里面放了5个120px的子容器,如果不考虑任何布局,5个子容器已经超越了500的大小了。而当我们给父容器添加flex布局的时候,就会排列一行,此时就算超越了容器大小依旧完整的充满容器,这是因为flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。那么我们对个别子容器设置不同的flex-shrink会怎么样呢?如下:

<div id="content"><div class="box" style="background-color:red;">A</div><div class="box" style="background-color:lightblue;">B</div><div class="box" style="background-color:yellow;">C</div><div class="box1" style="background-color:brown;">D</div><div class="box1" style="background-color:lightgreen;">E</div>
</div>
<style>
#content {display: flex;width: 500px;border:2px solid red;
}#content div {width: 120px;border: 3px solid rgba(0,0,0,.2);
}
.box { flex-shrink: 1;
}.box1 { flex-shrink: 2; 
}</style>

我们会发现DE明显变短,并且子容易排列完整填充父容器。那么他们分别缩短了多少呢?

我们看看菜鸟上面如何计算的:

说实话,我看到这里比较懵的,为什么要计算这么麻烦。。。。

我用我的方法吧。。。首先五个子容器不压缩得占用空间600,但是容器只有500,多了100,这多的100就得按照flex-shrink的大小进行平分(要恢复到500的大小,只能每个子容器减去这个大小),那么A容器就是:100/7*1=14.28=14,即A容器就得减去14PX的大小。同理,D,E就是得28px.

  1. felx-grow

felx-grow就和flex-shrink相反,对扩张的比例分配。默认值为0。

<div id="main"><div style="background-color:coral;"></div><div style="background-color:lightblue;"></div><div style="background-color:khaki;"></div><div style="background-color:pink;"></div><div style="background-color:lightgrey;"></div>
</div>
<style> 
#main {width: 350px;height: 100px;border: 1px solid #c3c3c3;display: flex;
}#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}</style>

到了这里,我突然想起一个问题,这个flex-grow我不知道各位用的多不多,但是我一般都是用flex:1这种直接用flex进行分配大小的。那么弹性盒模型中flex-grow 和flex的区别是什么?

3.flex-basis 属性

用处:设置弹性盒元素的初始长度。有兴趣可以了解下,没啥特别的,不过对我个人来说挺冷门的,哈哈哈

相关文章:

flex-shrink和felx-grow

本文就是简单的介绍下flex-shrink和felx-grow的作用和计算方式吧&#xff1b;关于这个介绍也是很多&#xff1b;flex-shrinkflex-shrink是flex布局中的一种方式&#xff0c;简单来说&#xff0c;就是当布局大小小于容器大小的时候&#xff0c;使用flex-shrink能够按照一定的比例…...

将HTTP接口配置成HTTPS

一、使用Java的keytool.exe程序生成本机的TLS许可找到Java的jdk目录进入bin默认安装路径C:\Program Files\Java\jdk1.8.0_91\bin 进入命令面板&#xff0c;在bin的路径栏中输入cmd敲击回车即可使用keytoolkeytool -genkeypair -alias tomcat_https -keypass 123456 -keyalg RSA…...

YOLOV5报错解决办法

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓YOLOV5报错解决办法&#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 1.在pycharm终端使用pip install…...

java final关键字 详解

概述&#xff1a;作用&#xff1a;细节&#xff1a;演示&#xff1a;总结&#xff1a;一、概述 : final [ˈ faɪnl]&#xff0c;最终的&#xff0c;最后的&#xff0c;决定性的&#xff0c;不可改变的。final作为Java中的一个关键字可以用来修饰类&#xff0c;方法&#xff0c…...

Vbs_To_Exe制作简易exe程序

文章目录一、准备vbs脚本文件二、工具打包exe一、准备vbs脚本文件 新建一个文本文档 复制下面代码到文本文档中 Set speech CreateObject("SAPI.SpVoice") speech.Speak "l love you!"修改文本后缀为.vbs。编码选择ANSI&#xff08;解决中文乱码问题&am…...

AI制药 - TMScore(US-align)、RMSD、Sequence 源码

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/129125467 参考文档:Nature Methods | 蛋白、RNA、DNA及其复合物结构的比对算法US-align 官网地址:https://zhanggroup.org/US-align/ TMScore TMScore,…...

关于个人的经历

简介 我是一个意外接触微机技术的五年专生(前三年寄读一个中专&#xff0c;后两年回大专学校)&#xff0c;2020年中考失利&#xff0c;以高中线上30分去了现在所在五年专&#xff0c;专业是软件&#xff0c;目前个人已过程序员&#xff0c;网管&#xff0c;信息处理员&#xff…...

设计在单链表中删除值相同的多余结点的算法(包括指针的引用的知识点)

1 C中指针与引用的区别 引用相当于起别名int m; int &n m;n 相当于 m 的别名&#xff08;绰号&#xff09;&#xff0c;对 n 的任何操作就是对m的操作。 所以 n 既不是m的拷贝&#xff0c;也不是指向 m 的指针&#xff0c;其实n就是 m 它自己。 引用的注意事项&#xff…...

100份简历才找一个合适的,2023,软件测试岗位饱和了吗?

各大互联网公司的接连裁员&#xff0c;政策限制的行业接连消失&#xff0c;让今年的求职雪上加霜&#xff0c;想躺平却没有资本&#xff0c;还有人说软件测试岗位饱和了&#xff0c;对此很多求职者深信不疑&#xff0c;因为投出去的简历回复的越来越少了。 另一面企业招人真的…...

(三十七)vue 项目中常用的2个Ajax库

文章目录axios实现vue-resource实现上一篇&#xff1a;&#xff08;三十六&#xff09;Vue解决Ajax跨域问题 先看一个github搜索案例 有一个搜索框&#xff0c;输入相关用户名&#xff0c;就能模糊搜索出用户&#xff0c;展现到下方 第一步&#xff1a;我们用到了第三方样式库…...

Python打包调试问题解决

使用pyinstaller打包&#xff0c;发现问题&#xff1a;代码运行时调试的结果不一致代码中设定的图标打包后没有显示出来打包代码程序test.py为入口函数main&#xff08;&#xff09;所在的文件pyinstaller -F -w -i test.ico test.py 不会出现控制台&#xff0c;图标为test.ic…...

计算机SCI期刊自引率一般是多少? - 易智编译EaseEditing

论文常用来指进行各个学术领域的研究和描述学术研究成果的文章&#xff0c;是探讨问题进行学术研究的一种手段&#xff0c;又是描述学术研究成果进行学术交流的一种工具&#xff0c;包括学年论文、毕业论文、学位论文、科技论文、成果论文等。 一般来说&#xff0c;论文的自引…...

力扣(LeetCode)417. 太平洋大西洋水流问题(2023.02.19)

有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#xff0c; heights[r][c]…...

Python解题 - CSDN周赛第30期 - 天然气订单

本期比赛的在线测试系统好像出了点问题&#xff0c;导致很多选手最后提交的分数是0&#xff0c;而问哥也遇到好几次提交后一直显示“运行中”而没有结果的情况。鉴于之前遇到过类似情况&#xff0c;不停地刷新页面才得以继续。但是此问题已经存在并持续了好几期&#xff0c;极大…...

移动WEB开发一、基础知识

零、文章目录 文章地址 个人博客-CSDN地址&#xff1a;https://blog.csdn.net/liyou123456789个人博客-GiteePages&#xff1a;https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee&#xff1a;https://gitee.com/bluecusliyou/TechLearnGithub&#xff1a;https:…...

07 二叉树

开始系统学习算法啦&#xff01;为后面力扣和 蓝桥杯的刷题做准备&#xff01;这个专栏将记录自己学习算法是的笔记&#xff0c;包括 概念&#xff0c; 算法运行过程&#xff0c;以及 代码实现&#xff0c;希望能给大家带来帮助&#xff0c;感兴趣的小伙伴欢迎评论区留言或者私…...

3|物联网控制|计算机控制-刘川来胡乃平版|第4章:过程通道与人机接口-4.1数字量输入输出通道接口|课堂笔记|ppt

...

从 ClickHouse 到 Apache Doris,腾讯音乐内容库数据平台架构演进实践

导读&#xff1a;腾讯音乐内容库数据平台旨在为应用层提供库存盘点、分群画像、指标分析、标签圈选等内容分析服务&#xff0c;高效为业务赋能。目前&#xff0c;内容库数据平台的数据架构已经从 1.0 演进到了 4.0 &#xff0c;经历了分析引擎从 ClickHouse 到 Apache Doris 的…...

linux线程的基本知识

这里用的是Linux的pthread线程库&#xff0c;需要加pthread线程库。 线程的创建 第一个参数是线程id的地址。第二个参数是线程属性&#xff0c;一般为NULL。第三个是要执行的函数。第四个是函数的参数&#xff0c;一般也为NULL 线程的等待&#xff0c;第一个参数是线程的id,第…...

docker swarm 集群服务编排部署指南(docker stack)

Docker Swarm 集群管理 概述 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机&#xff0c;使得容器可以组成跨主机的子网网络。Docker Swarm 提供了标准的 Docker API&#xff0c;所有任何已经与 Docker 守护程序通信的工具都可以使用…...

DeepLabV3语义分割环境配置、DeepLabV3语义分割模型代跑训练、DeepLabV3语义分割模型改进创新DeepLabV3语义分割环境配置:Windows、Ubuntu、Centos、

DeepLabV3语义分割环境配置、 DeepLabV3语义分割模型代跑训练、 DeepLabV3语义分割模型改进创新 DeepLabV3语义分割环境配置&#xff1a;Windows、Ubuntu、Centos、Macos等系统环境&#xff0c;如果电脑拥有显卡&#xff0c;可配置GPU版本的DeepLabV3语义分割环境。 DeepLabV3语…...

一键隐藏桌面图标任务栏的实用工具

软件介绍 AutoDesktop是一个专门管理桌面图标显示与隐藏的小工具。它的作用很简单&#xff1a;一键把桌面上乱七八糟的图标和底部的任务栏全都藏起来&#xff0c;还你一个干干净净的桌面。 体积小巧运行轻量 整个软件才40K大小&#xff0c;真的非常小。双击运行后会自动关闭…...

3步解决Realtek 8922AE WiFi 7网卡驱动固件不匹配实战指南

3步解决Realtek 8922AE WiFi 7网卡驱动固件不匹配实战指南 【免费下载链接】rtw89 Driver for Realtek 8852AE, an 802.11ax device 项目地址: https://gitcode.com/gh_mirrors/rt/rtw89 文章目录 【问题定位】WiFi 7网卡驱动加载失败的核心原因【环境诊断】三层级驱动问…...

如何利用Gumbo-parser提升自动化测试效率:终极指南 [特殊字符]

如何利用Gumbo-parser提升自动化测试效率&#xff1a;终极指南 &#x1f680; 【免费下载链接】gumbo-parser An HTML5 parsing library in pure C99 项目地址: https://gitcode.com/gh_mirrors/gu/gumbo-parser Gumbo-parser是一个纯C99语言编写的HTML5解析库&#xff…...

从‘套娃’结构到SOTA效果:我是如何用U2-Net搞定商品抠图与海报生成的

从‘套娃’结构到SOTA效果&#xff1a;我是如何用U2-Net搞定商品抠图与海报生成的 去年双十一大促前&#xff0c;我们电商团队遇到了一个棘手问题&#xff1a;每天新增的上万张商品图需要快速去除背景&#xff0c;用于生成营销海报。传统Photoshop手动处理每张图需要5-10分钟&a…...

逆向阿里系227滑块,除了n值,这几个固定参数(a/t/p/x5secdata)你确定拿对了吗?

逆向阿里系227滑块&#xff1a;那些被低估的固定参数陷阱 在逆向工程的世界里&#xff0c;我们常常被那些复杂的算法和动态生成的值所吸引&#xff0c;却忽略了那些看似简单却同样关键的固定参数。就像建造一座高楼&#xff0c;大家总是关注最显眼的钢结构&#xff0c;却很少有…...

效率提升:用快马AI自动生成技能创建器的核心判断逻辑代码

最近在开发一个技能创建器时&#xff0c;遇到了一个很常见的痛点&#xff1a;每次新增技能都要手动编写大量重复的条件判断逻辑。这种机械劳动不仅耗时&#xff0c;还容易出错。经过一番摸索&#xff0c;我发现用InsCode(快马)平台的AI辅助功能可以完美解决这个问题。 问题分析…...

3个实战技巧:彻底解锁Cursor Pro功能的高效完整指南

3个实战技巧&#xff1a;彻底解锁Cursor Pro功能的高效完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial…...

granite-4.0-h-350m效果展示:中英双语问答、代码补全、文本摘要三连击

granite-4.0-h-350m效果展示&#xff1a;中英双语问答、代码补全、文本摘要三连击 今天带大家看看一个轻量级但能力不俗的AI模型——granite-4.0-h-350m。这个模型虽然只有3.5亿参数&#xff0c;但在多个任务上的表现却让人眼前一亮。我用Ollama部署了它的文本生成服务&#x…...

重磅!GPT-6曝光了

就在刚刚&#xff0c;有知情人士爆料&#xff1a;GPT-6正在内测&#xff0c;预计4月16日正式发布。消息源头&#xff0c;是X平台上的科技大V 草莓哥iruletheworldmo。他说&#xff0c;最近OpenAI内部将有大动作&#xff0c;他从中搞到了不少猛料。草莓哥说了一些关键信息&#…...