【css】深入理解flex属性

参考文章:
深入理解Flex属性
flex弹性布局教程-05-项目属性flex-shrink

flex:flex-grow flex-shrink flex-basis
flex:0 1 0

如何计算flex布局,有flex-shrink和flex-grow的情况下,每个元素的大小
flex-grow生效公式如下:

可用空间 = 父元素width - 子元素flex-basis总和
单位扩展空间 = 可用空间/子元素flex-grow总和
元素的实际大小 = flex-basis + flex-grow*单位扩展空间

flex-shrink生效公式如下:

理想空间 = 所有子元素的(flex-basisflex-shrink)之和
溢出空间 = 父元素容器的宽度 - 所有子元素的(flex-basis)之和
每个元素的收缩因子= (flex-basis * flex-shrink) / 理想空间
元素的实际大小 = flex-basis + 收缩因子
溢出空间

1、flex-basis

flex-basis是伸缩的基准值,也就是它来决定我们元素的宽度。

flex-basis的默认值是0,如果值为auto的话,将会是我们设置的宽度大小,它的优先级高于我们设置的width属性

flex-basis也决定着flex-grow和flex-shrink的生效情况:

  • 当所有子元素的flex-basis之和大于父元素容器的宽度的时候,flex-shrink生效
  • 当所有子元素的flex-basis之和小于父元素容器的宽度的时候,flex-grow生效
2、flex-shrink

flex-shrink是收缩比例,当子元素flex-basis之和大于父元素容器宽度的时候生效

flex-shrink的默认值是1,当值为0的时候,元素将不会收缩

3、flex-grow

flex-grow是伸张比例,也是每个元素占据盒子宽度的比例,当子元素flex-basis之和小于父元素容器宽度的时候生效

flex-grow的默认值是0,因此当没有设置这个属性的时候,其实其他元素都是和他一样的比例,占比同等大小

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

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

相关文章

mongodb 安装

yum 安装 阿里镜像库 , 注意不要用阿里自带的系统 , 要用centos镜像 # 创建一个 .repo 文件 vi /etc/yum.repos.d/mongodb-org.repo# 添加内容[mongodb-org] name MongoDB Repository baseurl https://mirrors.aliyun.com/mongodb/yum/redhat/$releasever/mongodb-org/4.4/…

谷粒商城----rabbitmq

一、 为什么要用 MQ? 三大好处,削峰,解耦,异步。 削峰 比如秒杀,或者高铁抢票,请求在某些时间点实在是太多了,服务器处理不过来,可以把请求放到 MQ 里面缓冲一下,把一秒内收到的…

Unity中Shader抓取屏幕并实现扭曲效果

文章目录 前言一、屏幕抓取,在上一篇文章已经写了二、实现抓取后的屏幕扭曲实现思路:1、屏幕扭曲要借助传入 UV 贴图进行扭曲2、传入贴图后在顶点着色器的输入参数处,传入一个 float2 uv : TEXCOORD,用于之后对扭曲贴图进行采样3、…

写一篇nginx配置指南

nginx.conf配置 找到Nginx的安装目录下的nginx.conf文件,该文件负责Nginx的基础功能配置。 配置文件概述 Nginx的主配置文件(conf/nginx.conf)按以下结构组织: 配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理…

计算机网络(二):TCP篇

文章目录 1. TCP头部包含哪些内容?2. 为什么需要 TCP 协议? TCP 工作在哪一层?3. 什么是 TCP ?4. 什么是 TCP 连接?5. 如何唯一确定一个 TCP 连接呢?6. UDP头部大小是多少?包含哪些内容&#xf…

burp+IE 微信小程序抓包教程

文章目录 一、BURP里新增监听端口二、BURP导出证书三、导入证书四、IE代理设置五、小程序抓包实际测试 一、BURP里新增监听端口 找一个没用的端口,使用以下方式新增 二、BURP导出证书 选择刚才新增的监听端口,点击证书导入导出 将其存出来即可&…

安卓机型系统美化 Color.xml文件必备常识 自定义颜色资源

color.xml文件是Android工程中用来进行颜色资源管理的文件.可以在color.xml文件中通过<color>标签来定义颜色资源.我们在布局文件中、代码中、style定义中或者其他资源文件中&#xff0c;都可以引用之前在color.xml文件中定义的颜色资源。 将color.xml文件拷到res/value…

c++的库函数std::move() 与 完美转发函数 std:: forward 源码

以下是两个注释&#xff1a; &#xff08;2&#xff09;以下是一个实验&#xff1a;

在HTML里,attribute和property有什么区别?

在HTML中&#xff0c;attribute 和 property 之间的区别是一个常见但容易混淆的概念。它们都与HTML元素有关&#xff0c;但它们在功能、用途和行为上有所不同。以下是它们之间的主要区别&#xff1a; 定义和来源: Attribute: 它们是在HTML标记中定义的&#xff0c;通常用于提供…

esxi网卡直通后虚拟机无网

出现选网卡的时候无法选中&#xff0c;这里应该是一个bug。 解决方法如下&#xff1a; 1.先随便选择一个网卡 2.勾先取消再重新勾选 3.保存退出&#xff0c;重启虚拟机即可

浅谈一下前端字符编码

背景 众所周知&#xff0c;计算机只能识别二进制&#xff0c;它是由逻辑电路组成&#xff0c;逻辑电路通常只有两个状态&#xff0c;开关的接通与断开&#xff0c;这两种状态正好可以用二进制数的0和1表示。但是现实中存在着其他的字符&#xff1a;数字、字母、中文、特殊符号…

学习记忆——数学篇——顺口溜记忆法+谐音记忆法+其他

顺口溜记忆法 【训练】 一次绝对不等式的解集&#xff1a;不等式| x x x| &#xff1e; a ( a > 0 ) &#xff1e;a(a>0) &#xff1e;a(a>0)的解集是 X > a 或 X < − a X>a或X<-a X>a或X<−a&#xff0c;不等式| x x x| < a ( a > 0 ) <…

Java————数组

1 、数组 数组可以看成是相同类型元素的一个集合&#xff0c; 在内存中是一段连续的空间。 每个空间有自己的编号&#xff0c;其实位置的编号为0&#xff0c;即数组的下标。 数组是引用类型。 1. 数组的创建 T[] 数组名 new T[N];T&#xff1a;表示数组中存放元素的类型 …

苹果官网数秒就被抢购引发崩溃,iPhone15热销,对小丑的强烈讽刺

面对网络上对iPhone15恶评如潮&#xff0c;甚至还有假5G等的风波&#xff0c;然而iPhone15的预购却超乎寻常的热烈&#xff0c;以至于苹果官网在开售几秒内就已崩溃了&#xff0c;显示出今年的iPhone15销售情况恐怕比往年的更要好。 除了苹果官网被抢购到崩溃之外&#xff0c;几…

Spring + vue 项目部署(全网最详细教程_含内网穿透部署)

本项目以Springboot 2.7.11和vue2做参考示例 第一步 展示前后端代码的成品 前端Vue 后端Java 项目写完后&#xff0c;差不多就是这个样子&#xff0c;仅供参考&#xff01; 第二步 开始打包前后端项目 前端打包的方式有以下几种&#xff1a; 方法1: #直接打包&#xff0…

Hugging Face使用Stable diffusion Diffusers Transformers Accelerate Pipelines

Diffusers A library that offers an implementation of various diffusion models, including text-to-image models. 提供不同扩散模型的实现的库&#xff0c;代码上最简洁&#xff0c;国内的问题是 huggingface 需要翻墙。 Transformers A Hugging Face library that pr…

【视觉SLAM入门】8 回环检测,词袋模型,字典,感知,召回,机器学习

"见人细过 掩匿盖覆” 1. 意义2. 做法2.1 词袋模型和字典2.1.2 感知偏差和感知变异2.1.2 词袋2.1.3 字典 2.2 匹配(相似度)计算 3. 提升 前言&#xff1a; 前端提取数据&#xff0c;后端优化数据&#xff0c;但误差会累计&#xff0c;需要回环检测构建全局一致的地图&…

深度学习编译器关键组件

1 高层中间代码 为了克服传统编译器中采用的IR限制DL模型中复杂计算的表达的局限性&#xff0c;现有的DL编译器利用高层IR&#xff08;称为图IR&#xff09;进行高效的代码优化设计。 1.1 图表示 基于DAG的IR&#xff1a;基于DAG的IR是编译器构建计算图的最传统方法之一&…

[NLP] LLM---<训练中文LLama2(四)方式一>对LLama2进行SFT微调

指令精调 指令精调阶段的任务形式基本与Stanford Alpaca相同。训练方案也采用了LoRA进行高效精调&#xff0c;并进一步增加了可训练参数数量。在prompt设计上&#xff0c;精调以及预测时采用的都是原版Stanford Alpaca不带input的模版。对于包含input字段的数据&#xff0c;采…