【flex-shrink】计算 flex弹性盒子的子元素的宽度大小

news/2024/9/24 21:58:24/

 计算以下两个子div的宽度大小:

代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div0 {width: 400px;height: 500px;background-color: aqua;display: flex;}#div0 div {width: 200px;height: 200px;}#div0 div:nth-child(1) {flex-basis: 30%;flex-shrink: 1;background-color: blue;}#div0 div:nth-child(2) {flex-basis: 90%;flex-shrink: 3;background-color: rgb(255, 251, 0);}</style>
</head><body><div id="div0"><div></div><div></div></div>
</body></html>


 解析:


1、计算元素的溢出的部分 

            因为我们flex-basis用的百分比 ,首先先计算各占多少像素
            元素一:0.3*400=120
            元素二:0.9*400=360
            所以他们两者总大小为:480 
            溢出部分:480-400=80

2、计算他们的总权重值

            120*1+360*3=1200

 3、分别计算收缩量

            元素一:80*1*(120/1200)=8
            元素二:80*3*(360/1200)=72

4、计算他们的大小


            元素一:120-8=118
            元素二:360-72=288
 

你学废了吗?


http://www.ppmy.cn/news/1529983.html

相关文章

编译 Android 11源码

参考小米6 lineageos官方编译文档&#xff1a;https://wiki.lineageos.org/devices/sagit/build 单独编译 framework 以LineageOS18.1&#xff08;Android 11&#xff09;为例&#xff1a; 1、在源码根目录执行&#xff1a; make framework-minus-apex 2、用生成的framewo…

【Docker】如何让docker容器正常使用nvidia显卡

首先确保宿主机正常安装了显卡驱动 nvidia-smi打印显卡信息如下&#xff1a; 安装nvidia-container-toolkit工具 sudo apt-get update && sudo apt-get install -y nvidia-container-toolkit sudo systemctl restart docker运行如下命令测试显卡是否在容器内可用 …

【ARM】A64指令介绍及内存屏障和寄存器

A64指令集介绍 ISA : Instruction System Architecture 指令集总结 跳转指令 使用跳转指令直接跳转&#xff0c;跳转指令有跳转指令B&#xff0c;带链接的跳转指令BL &#xff0c;带状态切换的跳转指令BX。 B 跳转指令&#xff0c;跳转到指定的地址执行程序。 BL 带链接的跳…

Android 车载应用开发指南 - CarService 详解(下)

车载应用正在改变人们的出行体验。从导航到娱乐、从安全到信息服务&#xff0c;车载应用的开发已成为汽车智能化发展的重要组成部分。而对于开发者来说&#xff0c;如何将自己的应用程序无缝集成到车载系统中&#xff0c;利用汽车的硬件和服务能力&#xff0c;是一个极具挑战性…

UWA支持鸿蒙HarmonyOS NEXT

华为在开发者大会上&#xff0c;宣布了鸿蒙HarmonyOS NEXT将仅支持鸿蒙内核和鸿蒙系统的应用&#xff0c;不再兼容安卓应用&#xff0c;这意味着它将构建一个全新且完全独立的生态系统。 为此&#xff0c;UWA也将在最新版的UWA SDK v2.5.0中支持鸿蒙HarmonyOS NEXT&#xff0c…

WebRtc一对一视频通话_New_peer信令处理

文章目录 一对一视频通话New_peer信令处理 2024-9-19 梳理信令处理的函数嵌套及实现思路一对一视频通话 New_peer信令处理 ZeroRTCEngine.prototype.onMessage function (event) {console.log("onMessage: " event.data);var jsonMsg null;try {jsonMsg JSON.p…

【系统架构设计师】虚拟机架构风格

虚拟机架构风格是一种通过软件模拟计算机硬件的平台,以支持多个操作系统或应用程序在同一物理硬件上并行运行。这种架构在现代计算环境中具有重要意义,尤其在云计算、虚拟化和多租户数据中心中,虚拟机的使用大大提升了资源利用效率、灵活性和可扩展性。 1. 虚拟化的概念与背…

MySQL 数据库课程设计

MySQL 是全球最流行的开源关系数据库管理系统之一&#xff0c;广泛用于网站开发、企业应用及数据管理。数据库课程设计是学习数据库管理和操作的重要环节&#xff0c;本文将详细介绍 MySQL 的基本概念、操作步骤和实际案例&#xff0c;通过操作指南的形式帮助学生更好地理解和运…