flex属性中的flex-grow、flex-shrink、flex-basis

flex-grow 属性

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

默认值为0,表示不伸展。

flex-grow属性值为0时,不伸展:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-grow: 0;">1</div><div class="content">2</div></div></body>
</html>

flex-grow属性值为1时伸展铺满整个容器:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-grow: 1;">1</div><div class="content">2</div><div class="content">3</div></div></body>
</html>

flex-grow属性值为2时,该项目的伸展比例是flex-grow属性值为1的项目的两倍:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-grow: 1;">1</div><div class="content" style="flex-grow: 2;">2</div><div class="content">3</div></div></body>
</html>

flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

默认值为1,代表当项目空间不足时子item等比例收缩,设置为0时则不会收缩,item会超出容器范围。

flex-shrink属性值为0时,超出容器不收缩,其余item平均分配剩余空间:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-shrink: 0;">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div></div></body>
</html>

flex-shrink属性值为2时,该项目的收缩比例是flex-shrink属性值为1的项目的两倍:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-shrink: 0;">1</div><div class="content" style="flex-shrink: 1;">2</div><div class="content" style="flex-shrink: 1;">3</div><div class="content" style="flex-shrink: 2;">4</div><div class="content" style="flex-shrink: 2;">5</div></div></body>
</html>

flex-basis 

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

默认值为auto,可设置一个长度单位或者一个百分比。

决定item最终size的因素,从优先级高到低:

        max-width\max-height\min-width\min-height

        flex-basis

        width\height

        内容本身的 size

flex-basis属性值设置:

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex-basis: 50%;">1</div><div class="content" style="flex-basis: 50px;">2</div><div class="content" style="flex-basis: 200px;">3</div></div></body>
</html>

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

CSS语法:

        flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

auto 与 1 1 auto 相同。(伸展、收缩) :

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: auto;">flex: auto;</div><div class="content"></div></div><div class="d-flex"><div class="content" style="flex: 1 1 auto;">flex: 1 1 auto;</div><div class="content"></div></div></body>
</html>

none 与 0 0 auto 相同。(不伸展、不收缩):

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: none;">flex: none;</div><div class="content"></div></div><div class="d-flex"><div class="content" style="flex: 0 0 auto;">flex: 0 0 auto;</div><div class="content"></div></div></body>
</html>

initial 设置该属性为它的默认值,即为 0 1 auto。(不伸展、收缩):

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: initial;">flex: initial;</div><div class="content"></div><div class="content"></div><div class="content"></div><div class="content"></div></div><div class="d-flex"><div class="content" style="flex: 0 1 auto;">flex: 0 1 auto;</div><div class="content"></div><div class="content"></div><div class="content"></div><div class="content"></div></div></body>
</html>
flex单值语法 

无单位数(flex: <number>): 它会被当作flex:<number> 1 0 的值。flex-shrink的值被假定为1,即可以伸缩。flex-basis的值被假定为0,默认是没有宽度的。

有效的宽度值: 它会被当作 <flex-basis> 的值。

给一个item设置flex: <number>

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 1;">flex: 1;</div><div class="content"></div><div class="content"></div></div></body>
</html>

给多个item设置flex: <number>

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 1;">flex: 1;</div><div class="content" style="flex: 2;">flex: 2;</div><div class="content" style="flex: 3;">flex: 3;</div></div></body>
</html>

给item设置有效宽度值(item总长度大于父容器,所以item会等比列收缩):

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 500px;">flex: 500px;</div><div class="content"></div><div class="content"></div></div></body>
</html>

flex双值语法

第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。

第二个值必须为以下之一:

        一个无单位数:它会被当作 <flex-shrink> 的值。

        一个有效的宽度值: 它会被当作 <flex-basis> 的值。 

flex: <number> <number>

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 0 0;">flex: 0 0;</div><div class="content" style="flex: 1 0;">flex: 1 0;</div><div class="content" style="flex: 1 1;">flex: 1 1;</div><div class="content"></div></div></body>
</html>

flex: <number> 有效宽度值

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 0 0;">flex: 0 0;</div><div class="content" style="flex: 0 150px;">flex: 0 150px;</div><div class="content" style="flex: 1 150px;">flex: 1 150px;</div><div class="content"></div></div></body>
</html>

flex三值语法

第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。

第二个值必须为一个无单位数,并且它会被当作  <flex-shrink> 的值。

第三个值必须为一个有效的宽度值, 并且它会被当作 <flex-basis> 的值。 

<!doctype html>
<html lang="en"><head><style>.d-flex {display: flex;width: 800px;height: 100px;border: 1px solid black;}.content {width: 200px;height: 100px;background-color: skyblue;border: 1px solid black;}</style></head><body><div class="d-flex"><div class="content" style="flex: 0 0 100px;">flex: 0 0 100px;</div><div class="content" style="flex: 1 0 150px;">flex: 1 0 150px;</div><div class="content" style="flex: 1 1 200px;">flex: 1 1 200px;</div><div class="content"></div></div></body>
</html>

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

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

相关文章

python学习 - 设计模式 - 组合模式

组合模式 Composite , 将对象组组合成树形结构以表示’部分-整体’ 的层次结构.组合模式使得用户对单个对象的组合对象的使用具有一致性 #!/usr/bin/python # -*- coding:UTF-8 -*- # File : d1.py # Software: PyCharm""" 组合模式 Composite , 将对象组组…

C语言——链表专题

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 点击主页&#xff1a;optimistic_chen和专栏&#xff1a;c语言&#xff0c; 创作不易&#xff0c;大佬们点赞鼓…

IP地址定位技术的广泛应用

IP地址定位技术是一种通过分析网络设备所使用的IP地址来确定其地理位置的地址技术手段。 IP地址定位技术基于互联网服务提供商&#xff08;ISP&#xff09;所分配的IP地址范围以及相关的地理信息数据库。当一个设备连接到网络并使用特定的IP地址进行通信时&#xff0c;IP地址定…

mac安装opencv并在vscode中配置c++环境调试推理YOLOv8网络模型

OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉库,提供了丰富的图像处理和计算机视觉算法。它支持多平台(包括 Windows、Linux、macOS)和多种编程语言(如 C++、Python、Java),使其成为研究、开发和部署计算机视觉应用的重要工具之一。 步骤 1: 创…

上海慢病管理app开发的意义及功能

近年来&#xff0c;随着经济与科技的不断发展&#xff0c;人们对慢性疾病的重视程度也不断提高。大家不再满足于周期较长的定期检查&#xff0c;而是渴求能够进行短期、实时的病情预防与监测&#xff0c;为了满足人们的需求&#xff0c;帮助大家更好的干预病情&#xff0c;上海…

Linux内核 -- 汇编结合ko案例之PMU获取周期技术

ARMv7汇编实现周期计数读取与清空 本文档详细描述了如何在ARMv7平台上使用汇编语言编写周期计数器读取与清空函数&#xff0c;如何在内核模块中导出这些函数供其他模块调用&#xff0c;以及如何使用Netlink接口供用户态程序进行调用。 1. 汇编函数实现 首先&#xff0c;编写…

Java OA系统邮件管理模块

## 使用Spring Boot和Hibernate开发OA系统邮件管理模块 使用Spring Boot和Hibernate开发一个OA系统的邮件管理模块。该模块将支持邮件发送、接收、存储、查找、分类、标签管理&#xff0c;以及附件的上传和接收。前端部分使用Thymeleaf模板引擎&#xff0c;数据库选择MySQL。 …

AI智能体的炒作与现实:GPT-4都撑不起,现实任务成功率不到15%

AI 智能体的宣传很好&#xff0c;现实不太妙。 随着大语言模型的不断进化与自我革新&#xff0c;性能、准确度、稳定性都有了大幅的提升&#xff0c;这已经被各个基准问题集验证过了。 但是&#xff0c;对于现有版本的 LLM 来说&#xff0c;它们的综合能力似乎并不能完全支撑得…

from PyQt5.QtChart import QChart ImportError: DLL load failed: 找不到指定的模块。

最近在开发pyqt5代码 在运行是遇到from PyQt5.QtChart import QChart ImportError: DLL load failed: 找不到指定的模块。问题&#xff0c; 估计是安装QChart安装没正确&#xff0c;可以更新下安装包&#xff0c; pip install PyQt5 --upgrade pip install PyQtChart --upgrade…

云原生技术峰会:引领智能算力时代的创新浪潮

云原生技术峰会&#xff1a;引领智能算力时代的创新浪潮 随着云计算技术的飞速发展和智能算力的不断提升&#xff0c;云原生架构已成为推动企业数字化转型的重要力量。近日&#xff0c;一场汇聚了业界顶尖专家和学者的云原生技术峰会成功举行&#xff0c;与会者共同探讨了云原…

【Linux】常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…

antd react tour 引导式访问组件解决ref获取不到的问题

我是用了Tab组件&#xff0c;tab分1,2,3步骤&#xff0c;直接用ref不对。所以我找了这种方式&#xff0c;使用原生获取dom const [ref1, setRef1] useState(null);const [ref2, setRef2] useState(null);const [ref3, setRef3] useState(null);const [open, setOpen] useSt…

nextjs-在页面之间的导航跳转

原文链接&#xff1a;https://nextjs.org/learn/dashboard-app/navigating-between-pages 01-nextjs起步02-css样式03-处理字体和图片04-创建layouts 和pages 页面更多 在上一章中&#xff0c;您创建了仪表板布局和页面。现在&#xff0c;让我们添加一些链接&#xff0c;允许…

canvas : Cannot read properties of null (reading ‘getContext‘)

获取 canvas 元素的 getContext 方法时&#xff0c;canvas 元素尚未正确绑定。可以通过确保在渲染 PDF 文件之前&#xff0c;canvas 元素已经正确挂载到 DOM 来解决这个问题。 解决方法 确保 pdfCanvas 引用已经绑定到正确的 DOM 元素。确保在渲染 PDF 文件时&#xff0c;can…

【模型】5分钟了解决策树是一个什么模型

本站原创文章&#xff0c;转载请说明来自《老饼讲解-机器学习》[www.bbbdata.com(https://www.bbbdata.com/ml) 决策树模型是机器学习中不可不学的模型之一&#xff0c;本文简单直接地快速讲解决策树是什么&#xff0c;如何实现。 一、决策树模型 决策树一般包括ID3决策树&am…

【JS问题】require相对路径引入模块

潜在问题 安全性问题&#xff1a;使用相对路径来引入模块可能会带来安全隐患&#xff0c;尤其是如果这段代码运行在客户端&#xff08;比如Node.js的Electron框架&#xff09;且相对路径可以被用户控制的情况下。恶意用户可能会尝试修改路径来访问不应该被访问的文件。 模块路…

记录一个笔误引发的bug导致生产环境报错,但是本地环境,测试环境运行正常

记录一个笔误引发的bug导致生产环境报错&#xff0c;但是本地环境&#xff0c;测试环境运行正常 因为headers请求头过长导致报错 在feign外调其他系统时候&#xff0c;是重新封装headers 问题在于 MultiValueMap 属于静态变量。这里讲userAgent的内容传递过去。是不断累加的…

Java 应用的部署和运维方法,包括 Tomcat、Docker 等

Java应用的部署和运维是一个复杂且多样的过程&#xff0c;包括从代码编写到应用上线&#xff0c;再到应用的持续维护和优化。 一、基于Tomcat的Java应用部署和运维 1. 环境准备 操作系统&#xff1a;选择适合运行Java和Tomcat的操作系统&#xff0c;常见的有Ubuntu、CentOS等…

如何遍历STL容器

在C中&#xff0c;遍历STL&#xff08;Standard Template Library&#xff09;容器通常可以通过多种方法来完成。以下是几种常用的遍历STL容器的方法&#xff1a; 1. 使用迭代器&#xff08;Iterator&#xff09; 迭代器是STL中用于遍历容器的主要工具。它们提供了一种通用方…

Qt项目天气预报(8) - 绘制温度曲线 + 回车搜索(最终篇)

全部内容在专栏&#xff1a; Qt项目 天气预报_mx_jun的博客-CSDN博客 目录 绘制温度曲线 事件过滤器在子控件上绘图 子控件下载事件过滤器 事件过滤器进行绘图 - eventFilter 画初步高温曲线 画初步低温曲线 效果演示 画低温曲线 画高温曲线 效果演示 按下回车搜索: …