flex: 1 是哪些属性的缩写？
flex：1是哪些属性的缩写?
flex：1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写；
解释下flex-grow
flex-grow是将剩余的空间，根据flex-grow的值平分，然后加到flex-basis上
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><title>flex-grow</title></head><body><p>内容的宽度是500px，flex item的flex-basic是60px。</p><p>A、B 为 flex-grow:1。C和D为 flex-grow:4</p><div id="content"><div class="box" style="background-color: red">A</div><div class="box" style="background-color: lightblue">B</div><div class="box1" style="background-color: yellow">C</div><div class="box1" style="background-color: brown">D</div></div></body>
</html>
上述代码 的flex-basis加起来是240px，父容器分完以后剩下260px，ABCD的flex-grow加起来10，那么每一份是26px，最终AB是60px + 26px = 86px，CD是60px + 26px * 4 = 164px。
是不是特别像老爷子突然噶了留下500块钱的遗产，兄弟4个来分，老大和老二说“我要60块钱，如果有多的可以再给我来一份”，老三和老四说“我们也要60块钱，如果有多的我们要四份”。最终老大和老二分到86，老三老四分到164，大家还都挺满意。
解释下flex-shrink
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><title>flex-shrink</title><style>#content {display: flex;width: 500px;}.box {flex-shrink: 1;}.box1 {flex-shrink: 4;}</style></head><body><p>内容的宽度是500px，flex item的flex-basic总和是1000px。</p><div id="content"><div class="box" style="background-color: red; flex-basis: 100px">A</div><div class="box" style="background-color: lightblue; flex-basis: 200px">B</div><div class="box1" style="background-color: yellow; flex-basis: 300px">C</div><div class="box1" style="background-color: brown; flex-basis: 400px">D</div></div></body>
</html>
上面例子
A的flex-basis 是100px， flex-shrink 是 1
B的flex-basis 是200px， flex-shrink 是 1
C的flex-basis 是300px， flex-shrink 是 4
D的flex-basis 是500px， flex-shrink 是 4
要平分的容量 NT = 100 + 200 + 300 + 400 - 500 = 500
最终A的宽度 = 100 - 100 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT =
83.87096774193549
B的宽度 = 200 - 200 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 167.74193548387098
C的宽度 = 300 - 300 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 106.45161290322582
D的宽度 = 400 - 400 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 141.93548387096774
相关文章：
flex: 1 是哪些属性的缩写？
flex：1是哪些属性的缩写? flex：1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写； 解释下flex-grow flex-grow是将剩余的空间，根据flex-grow的值平分，然后加到flex-basis上 <!doctype html> <htm…...
python基于opencv实现数籽粒
千粒重是一个重要的农艺性状，通过对其的测量和研究，我们可以更好地理解作物的生长状况，优化农业生产，提高作物产量和品质。但数籽粒数目是一个很繁琐和痛苦的过程，我们现在用一个简单的python程序来数水稻籽粒。代码的…...
OpenCV图像处理——基于OpenCV的ORB算法实现目标追踪
概述 ORB（Oriented FAST and Rotated BRIEF）算法是高效的关键点检测和描述方法。它结合了FAST（Features from Accelerated Segment Test）算法的快速关键点检测能力和BRIEF（Binary Robust Independent Elementary Feat…...
13.JavaWeb XML：构建结构化数据的重要工具
目录 导语： 一、XML概念 （1）可拓展 （2）功能-存储数据 （3）xml与html的区别 二、XML内容 三、XML用途 四、案例：使用XML构建在线书店的书籍数据库 结语： 导语&…...
鸿蒙OS实战开发：【多设备自适应服务卡片】
介绍 服务卡片的布局和使用，其中卡片内容显示使用了一次开发，多端部署的能力实现多设备自适应。 用到了卡片扩展模块接口，[ohos.app.form.FormExtensionAbility] 。 卡片信息和状态等相关类型和枚举接口，[ohos.app.form.formInf…...
深度学习基础之一：机器学习
文章目录 深度学习基本概念(Basic concepts of deep learning)机器学习典型任务机器学习分类 模型训练的基本概念基本名词机器学习任务流程模型训练详细流程正、反向传播学习率Batch size激活函数激活函数 sigmoid 损失函数MSE & M交叉熵损失 优化器优化器 — 梯度下降优化…...
Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之五 简单指定视频某片段重复播放效果
Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之五 简单指定视频某片段重复播放效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之五 简单指定视频某片段重复播放效果 一、简单介绍 二、简单指定视频某片段重复播放…...
ARXML处理 - C#的解析代码（二）
参数类 参数容器（ECUCPARAMCONFCONTAINERDEF）的PARAMETERS集合类由以下参数类实例构成。 枚举参数（ECUCENUMERATIONPARAMDEF ） 配置一个下拉选项，如PORT中一个pin可以配置SPI, CAN, PWM /// <remarks/>[Syste…...
关于华为即将举行的鸿蒙春季沟通会的新闻报道
华为计划在4月11日举办此次活动，届时将推出与车和PC类相关的新产品。尽管备受期待的华为P70系列设备的发布尚未得到官方确认，但已有多家媒体对此进行了报道。 文章中还提到了智界S7的新款可能在4月11日上市，并进行多项新功能升级。智界S7是去…...
MySQL视图及如何导入导出
1.视图 MySQL 视图（View）是一种虚拟存在的表，同真实表一样，视图也由列和行构成，但视图并不实际存在于数据库中。行和列的数据来自于定义视图的查询中所使用的表，并且还是在使用视图时动态生成的࿰…...
文心一言上线声音定制功能；通义千问开源模型；openAI又侵权？
文心一言上线定制专属声音功能 百度旗下 AI 聊天机器人文心一言上线新功能，用户录音一句话，即可定制声音。 使用这项功能需要使用文心一言 App。在创建智能体中，点击创建自己的声音，朗读系统提示的一句话，等候几秒钟时…...
课时89：流程控制_函数进阶_函数变量
2.1.4 综合案例 这一节，我们从 信息采集、环境部署、小结 三个方面来学习。 信息采集 脚本实践-采集系统负载信息 查看脚本内容 [rootlocalhost ~]# cat function_systemctl_load.sh #!/bin/bash # 功能：采集系统负载信息 # 版本：v0.3 # …...
Linux命令-dpkg-preconfigure命令（Debian Linux中软件包安装之前询问问题）
说明 dpkg-preconfigure命令 用于在Debian Linux中软件包安装之前询问问题。 语法 dpkg-preconfigure(选项)(参数)选项 -f：选择使用的前端； -p：感兴趣的最低的优先级问题； --apt：在apt模式下运行。参数 软件包&am…...
SEO优化艺术：精细化技巧揭示与搜索引擎推广全面战略解读
SEO（搜索引擎优化，Search Engine Optimization）是一种网络营销策略，旨在通过改进网站内外的各项元素，提升网站在搜索引擎自然搜索结果中的排名，从而吸引更多目标用户访问网站，增加流量ÿ…...
《springcloud alibaba》 四 seata安装以及使用
目录 准备调整db配置准备创建数据库 seata配置nacos配置confi.txt下载向nacos推送配置的脚本 启动seata新建项目order-seata项目 订单项目数据库脚本pom.xmlapplication.yml启动类实体类dao类service类controller类feign类mapper类 stock-seata 库存项目数据库脚本pom.xmlappli…...
-bash: cd: /etc/hadoop: 没有那个文件或目录
解决办法：source /etc/profile 运行 source /etc/profile 命令会重新加载 /etc/profile 文件中的配置，这样做的目的是使任何更改立即生效，而不需要注销并重新登录用户。通常，/etc/profile 文件包含系统范围的全局 Shell 配置&…...
JVM字节码与类加载——字节码指令集与解析
文章目录 1、概述1.1、字节码与数据类型1.2、指令分类 2、加载与存储指令2.1、局部变量入栈指令2.2、常量入栈指令2.3、出栈装入局部变量表指令 3、算术指令3.1、彻底理解i与i3.2、比较指令 4、类型转换指令4.1、宽化类型转换4.2、窄化类型转换 5、对象、数组的创建与访问指令5…...
景芯2.5GHz A72训练营dummy添加(一）
景芯A72做完布局布线之后导出GDS，然后进行GDS merge，然后用Calibre对Layout添加Dummy。在28nm以及之前的工艺中，Dummy metal对Timing的影响不是很大，当然Star RC也提供了相应的解决方案，可以考虑Dummy metal来抽取RC。…...
React - 请你说一说setState是同步的还是异步的
难度级别：中高级及以上 提问概率：70% 在React项目中，使用setState可以更新状态数据，而不能直接使用为this.state赋值的方式。而为了避免重复更新state数据，React首先将state添加到状态队列中，此时我们可以通过shouldComponentUpdate这个钩…...
设计模式之命令模式（下）
2）完整解决方案 1.结构图 FBSettingWindow是“功能键设置”界面类，FunctionButton充当请求调用者，Command充当抽象命令类，MinimizeCommand和HelpCommand充当具体命令类，WindowHanlder和HelpHandler充当请求接收者。 …...
NotebookLM审稿回复效率提升300%：用结构化Prompt工程重构Response框架（含可直接导入的Notion模板）
更多请点击： https://intelliparadigm.com 第一章：NotebookLM审稿意见回复的范式变革 从线性批注到语义驱动的协同迭代 NotebookLM 不再将审稿意见视为静态文本批注，而是将其作为结构化知识图谱的输入节点。当用户上传论文 PDF 与审稿人意见…...
【ElevenLabs企业级克隆部署白皮书】：单模型支持12种语境情绪、延迟＜480ms、通过GDPR+CCPA双认证
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs企业级语音克隆技术全景概览 ElevenLabs 企业级语音克隆技术以高保真度、低延迟和强可控性为核心，面向金融客服、跨国培训、无障碍内容生成等关键业务场景提供端到端语音合成解决…...
搞懂USB2.0 Reset：从Hub发信号到设备握手的完整流程拆解
USB2.0 Reset全流程解析：从信号触发到高速模式切换的工程实践 当你的USB设备频繁掉线或枚举失败时，逻辑分析仪上那些跳变的波形到底在诉说什么？作为嵌入式开发者，我们常常需要像侦探一样解读这些电子信号背后的协议语言。本文将带…...
大模型接入业务系统：如何用RAG技术让AI精准回答内部文档问题？
本文探讨了如何利用RAG（检索增强生成）技术使大模型能够回答公司内部文档问题。文章首先介绍了企业面临的需求挑战，即大模型缺乏对私有内部知识的理解。接着详细解析了RAG的基本原理，即通过检索相关资料再让大模型生成答案。随后&a…...
数字电路模块化设计的艺术：Logisim-evolution中的层次化抽象实践
数字电路模块化设计的艺术：Logisim-evolution中的层次化抽象实践 【免费下载链接】logisim-evolution Digital logic design tool and simulator 项目地址: https://gitcode.com/gh_mirrors/lo/logisim-evolution 在数字电路设计的世界里，复杂系统…...
多变量分数阶系统的频域分析与设计【附程序】
✨ 长期致力于多变量系统、频率域、分数阶PID控制、鲁棒控制、参数拟合、参数优化、工具箱、框图法研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）基…...
紫光同创FPGA网络摄像头方案中，RGMII转GMII模块的Verilog实现与调试避坑指南
紫光同创FPGA网络摄像头方案中RGMII-GMII转换模块的深度解析与实战指南 当你在调试紫光同创FPGA网络摄像头方案时，是否遇到过这样的场景：PHY芯片与FPGA之间的物理层连接已经建立，但网络数据始终无法正常传输？或者上位机接收到的视…...
《从GIS前端到AIGC大厂：WebGIS、WebGL、Three.js技术栈的底层能力拆解与岗位适配指南》
前端GIS技术栈：从图形学底层到AIGC营销增长的全链路实战指南 （附大厂AI前端JD精准匹配与可落地项目） 🔖 目录理论篇：GIS中必学的图形学、WebGL、Three.js核心内容（含GIS实战细节） 1.1 计算机图形…...
考研高数救星：用Python的SymPy库5分钟搞定洛必达法则极限题
考研高数救星：用Python的SymPy库5分钟搞定洛必达法则极限题 数学分析中，洛必达法则堪称求解极限问题的"瑞士军刀"，尤其对于0/0型和∞/∞型未定式。但传统手工求解往往需要反复求导验证，既耗时又容易出错。如今ÿ…...
STM32 FSMC/FMC接口详解：地址映射、时序配置与实战优化
1. 项目概述：深入理解STM32的FSMC/FMC接口在嵌入式开发中，尤其是涉及大屏显示、高速数据采集或复杂外部设备交互的项目里，我们常常会遇到一个绕不开的“硬骨头”——如何让STM32单片机高效、稳定地与外部并行存储器或设备通信。这时ÿ…...