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

【CSS in Depth 2 精译_024】4.2 弹性子元素的大小

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局
    • 4.1 Flexbox 布局原理(已完结)
      • 4.1.1 创建一个基础的 Flexbox 菜单
      • 4.1.2 添加内边距与间隔
    • 4.2 弹性子元素的大小 ✔️
      • 4.2.1 使用 flex-basis 属性 ✔️
      • 4.2.2 使用 flex-grow 属性 ✔️
      • 4.2.3 使用 flex-shrink 属性 ✔️
      • 4.2.4 实际应用 ✔️
    • 4.3 弹性布局的方向(精译中 ⏳)

文章目录

    • 4.2 弹性子元素的大小
      • 4.2.1 使用 flex-basis 属性
      • 4.2.2 使用 flex-grow 属性
      • 4.2.3 使用 flex-shrink 属性
      • 4.2.4 实际应用

4.2 弹性子元素的大小

弹性子元素的尺寸大小固然可以用熟悉的 widthheight 属性来指定,但 Flexbox 布局提供了更丰富的选择。本节就来重点考察其中之一:flex 属性。

flex 属性控制的是沿主轴方向(通常为宽度)上的弹性子元素大小。如代码清单 4.6 所示,先在页面主区域应用 Flexbox 布局,再通过 flex 属性设置各列的尺寸。样式更新后的主区域效果如图 4.7 所示。

图 4.7 应用了弹性布局的白色主区域效果图

图 4.7 应用了弹性布局的白色主区域效果图

根据代码清单 4.6 更新本地样式表。该样式通过 tile 类设置白色背景,然后用 flex 类指定 <main> 元素为弹性容器。

代码清单 4.6 在主容器上应用 Flexbox 布局

.tile {/* 给三个板块加上白色背景和内边距 */padding: 1.5em;background-color: #fff;
}.flex {/* 在主容器上应用 flexbox 布局并设置间隙 */display: flex;gap: var(--gap-size);
}

这样,页面内容就分为了两列:左边的大块区域(column-main)为页面正文区,右边一栏则是登录表单和一个较小的报价区(column-sidebar)。但此时还没有指定列宽,因此宽度是随内容本身自行调整的。如图 4.7 所示,两列内容未能完全填满可用空间,当然对小窗口而言或许没问题。

弹性子元素上的 flex 属性包含了好几个配置项。先通过一个最基本的案例来熟悉它。用 column-maincolumn-sidebar 类来定位两列,再通过 flex 分别指定 ⅔ 和 ⅓ 的列宽:

代码清单 4.7 使用 flex 属性设置列宽

.column-main {flex: 2;
}
.column-sidebar {flex: 1;
}

这样,两列的宽度就扩展开来,二者之和与 nav 导航条的宽度相等,并保持正文列的宽度是侧边栏的两倍。Flexbox 贴心地完成了所有数学计算。下面具体考察一下这一计算过程。

flex 属性其实是三个尺寸属性 flex-growflex-shrinkflex-basis 的简写形式。上面的样式相当于只设置了 flex-grow,其余两个属性则取默认值(分别为 10%)。因此 flex: 2 等效于 flex: 2 1 0%。通常首选简写形式,但也可以像这样分开声明:

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

下面就来分别学习这三个属性。先从 flex-basis 开始,因为它是其余两个属性的基础。

4.2.1 使用 flex-basis 属性

flex-basis 定义了元素大小的基准值,即一个初始的“主尺寸”。flex-basis 属性可以设置为任意合法的 width 属性值,如 pxem 及百分比;其初始值(initial value)为 auto,此时如果浏览器发现元素指定了 width 属性,则该 width 值即为 flex-basis 的值,否则根据元素内容确定大小。如果 flex-basis 的值不为 auto,其 width 属性值也将被忽略。如图 4.8 所示。

图 4.8 三个弹性子元素的 flex-basis 均为 20%,各占初始主尺寸(宽度)的 20%

图 4.8 三个弹性子元素的 flex-basis 均为 20%,各占初始主尺寸(宽度)的 20%

初始主尺寸全部确定后,这些弹性子元素可能还需要沿主轴方向适度伸缩,以适应(或填充)弹性容器的大小。此时就需要 flex-growflex-shrink 这两个属性做进一步控制。

4.2.2 使用 flex-grow 属性

子元素的 flex-basis 全部确定后,连同子元素间的所有间隙与外边距,加起来的总宽度未必刚好等于弹性容器的宽度,很可能会留白(如图 4.8 所示)。

这部分留白(或剩余宽度)会根据 flex-grow 的值按比例分配给每个弹性子元素。flex-grow 的值为非负整数。当值为 0 时,表示该弹性子元素的宽度最多延展到 flex-basis 的大小;而当值大于 0 时,则表示该元素将按比例延展,直至填满整个弹性容器(如图 4.9 所示)。

图 4.9 带有 flex-grow 值的子元素将按比例延展,直到填满整个弹性容器

图 4.9 带有 flex-grow 值的子元素将按比例延展,直到填满整个弹性容器

flex-grow 的值越大,该元素的“权重”越高,占据的剩余宽度也就越多。如图 4.10 所示,flex-grow: 2 的子元素延展量是 flex-grow: 1 的子元素的两倍。

图 4.10 flex-grow 值越大,子元素延展时分得的剩余可用宽度的比重就越高

图 4.10 flex-grow 值越大,子元素延展时分得的剩余可用宽度的比重就越高

回到本节开头那个示例。简写声明 flex: 2flex: 1 对应的 flex-basis 均为 0%,因此,用整个容器的宽减去两列间的间隙 1.5em,就得到了总剩余宽度的大小。剩余宽度再按比例分配给这两列:总量的 ⅔ 分给第一列,剩下的 ⅓ 分给第二列(如图 4.11 所示)。

图 4.11 两个内容列完全填充弹性容器宽度后的效果图

图 4.11 两个内容列完全填充弹性容器宽度后的效果图

推荐使用简写属性 flex,而不是单独声明 flex-growflex 属性与大多数简写属性不同,其省略的样式值不会被设为对应的初始值(initial value);相反,简写形式会默认给它们赋上有用的值:flex-grow1flex-shrink 也为 1,而 flex-basis 默认取 0%。在大多数情况下这些值都是满足需要的。

4.2.3 使用 flex-shrink 属性

flex-shrink 属性与 flex-grow 遵循相似的原则。初始主尺寸确定后,累加后的总宽度可能会超出弹性容器的可用宽度。如果不设置 flex-shrink,内容就会溢出(如图 4.12 所示)。

图 4.12 弹性子元素总的初始宽度可能超出弹性容器

图 4.12 弹性子元素总的初始宽度可能超出弹性容器

各子元素上的 flex-shrink 值表示该元素是否应该收缩尺寸,以防溢出容器。若值为 0,则不收缩;若值大于 0,则对应元素将一直收缩,直到总尺寸不再溢出。flex-shrink 的值所占比重越高,其子元素收缩的幅度相应就越大(由于收缩时初始主尺寸也算在内,因此尺寸大的元素会比尺寸小的收缩得更多)。

作为备选方案,也可以在示例页中通过 flex-shrink 来实现类似的两列布局效果。先将两个内容列的 flex-basis 设为想要的比例(即 66.67% 和 33.33%),这样二者的总宽度加上 1.5em 的间隙,总量将比容器多出 1.5em。再将两列的 flex-shrink 分别设为 1,这样每一列就会收缩相同的宽度以避免溢出容器。所需样式如代码清单 4.8 所示。

代码清单 4.8 使用 flex 属性设置宽度

.column-main {flex: 66.67%;  /* 等效于 flex: 1 1 66.67% */
}
.column-sidebar {flex: 33.33%;  /* 等效于 flex: 1 1 33.33% */
}

该解决方案与前面(即代码清单 4.7)给出的方案可谓殊途同归,都能满足页面布局的需要。

注意

如果深究细节,代码清单 4.7 和 4.8 之间还是存在细微差别的。具体原因有点复杂,但简单来讲,是因为 column-main 列设置了内边距 padding,而 column-sidebar 列则没有。当 flex-basis0% 时,内边距会改变弹性子元素初始主尺寸的计算方式。因此,代码清单 4.7 中的正文列 column-main 会比 4.8 中的略宽一些。如果对测量精度有要求,网格布局不失为一种更好的解决方案(详见第 5 章)。

4.2.4 实际应用

flex 属性的用法有很多,可以像前面的网页那样,用 flex-grow 值或者 flex-basis 百分比来定义每列的占比;也可以定义一组宽度固定的列,外加可以随视口动态缩放的“流体”列(“fluid” columns);还可以效仿 Bootstrap 那样的第三方库,通过构建出一套“网格系统”,提供一系列可复用的样式类,来定义具有不同预设尺寸的布局列。图 4.13 给出了 Flexbox 可以实现的几种布局效果。

图 4.13 用 flex 属性定义元素尺寸的几种方式

图 4.13 用 flex 属性定义元素尺寸的几种方式

第三个示例展示的是曾经的“圣杯”布局(“Holy Grail” layout)—— 一个在过去用 CSS 实现起来异常困难的布局效果。该布局中,两个侧边栏的宽度是固定的,而中间那一栏则是“流动的”(“fluid”),即要求自动填满可用空间。最要命的是,这三列的高度还要完全相等,而高度又是其内容决定的。现在,人们只要利用不同的弹性子元素,略加想像就能组合出各式各样的解决方案轻松实现这样的效果。

相关文章:

【CSS in Depth 2 精译_024】4.2 弹性子元素的大小

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…...

你需要尝试的5种讲故事模板

好消息&#xff1a;你不需要成为一位创意写作专家也能讲述一个精彩的故事。 坏消息&#xff1a; 任何人 都可以写一篇博客&#xff0c;或者在社交媒体上发表一些内容&#xff0c;或者拼凑一个故事演示。你需要在大量竞争中抓住目标受众的注意力——更糟的是&#xff0c;内容过…...

只需两步便可生成 51 单片机最精准的延时函数

前言# 我们在学习 51 单片机的过程中会用到延时&#xff0c;比如一个简单的流水灯就需要延时来控制依次点亮的时间&#xff0c;或者一些模块在单片机发出读数据指令后&#xff0c;需要延时几十微秒才可以读出数据等等&#xff0c;这些都离不开延时&#xff0c;所以我们需要一个…...

TETFN情感计算的实践复现(论文复现)

TETFN情感计算的实践复现&#xff08;论文复现&#xff09; 本文所涉及所有资源均在传知代码平台可获取 文章目录 TETFN情感计算的实践复现&#xff08;论文复现&#xff09;概述研究背景主要贡献模型框架数据介绍及下载复现过程&#xff08;重要&#xff09;运行过程及结果 概…...

游戏各个知识小点汇总

抗锯齿原理记录 SSAA&#xff1a;把成像的图片放大N倍&#xff0c;然后每N个点进行平均值计算。一般N为2的倍数。比如原始尺寸是1000x1000&#xff0c;长宽各放大2倍变成2000x2000。 举例&#xff1a; 原始尺寸&#xff1a; 放大2倍后 最后平均值计算成像&#xff1a; MSAA&…...

Python设计模式实战:开启软件设计的精进之旅

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

用RNN(循环神经网络)预测股票价格

RNN&#xff08;循环神经网络&#xff09;是一种特殊类型的神经网络&#xff0c;它能够处理序列数据&#xff0c;并且具有记忆先前信息的能力。这种网络结构特别适合于处理时间序列数据、文本、语音等具有时间依赖性的问题。RNN的核心特点是它可以捕捉时间序列中的长期依赖关系…...

08-图7 公路村村通(C)

很明显聪明的同学已经发现&#xff0c;这是一个稠密图&#xff0c;所以用邻接矩阵。可以很好的表达&#xff0c;比邻接表有优势&#xff0c;所以&#xff0c;采用邻接矩阵破题&#xff0c; 当然也可以用邻接表&#xff0c;仔细观察我的AC,会发现其实都一样&#xff0c;只是存储…...

Java-sleep()、wait()、join()、yield()的区别

关于线程&#xff0c;作为八股文面试中必问点&#xff0c;我们需要充分了解sleep()、wait()、join()以及yield()的区别。在正式开始之前先让我们了解两个概念&#xff1a;锁池和等待池 1.锁池 所有需要竞争同步锁的线程都会放在锁池当中&#xff0c;比如当前对象的锁已经被其中…...

Linux命令的补全和自动完成完全开启

前言 在安装好RockyLinux8.8后&#xff0c;输入dn后&#xff0c;按下“TAB”能自动提示&#xff0c;但在输入dnf make后&#xff0c;按下“TAB”不能实现自动补全&#xff0c;如果要使Linux的Bash支持完整的自动提示和补全功能&#xff0c;还需要执行一些其它操作。 内容 1、…...

Deep Active Contours for Real-time 6-DoF Object Tracking

这篇论文解决了从RGB视频进行实时6自由度&#xff08;6-DoF&#xff09;物体跟踪的问题。此前的基于优化的方法通过对齐投影模型与图像来优化物体姿态&#xff0c;这种方法依赖于手工设计的特征&#xff0c;因此容易陷入次优解。最近的基于学习的方法使用神经网络来预测姿态&am…...

IDEA安装教程配置java环境(超详细)

引言 IntelliJ IDEA 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;广泛用于 Java 开发&#xff0c;但也支持多种编程语言&#xff0c;如 Kotlin、Groovy 和 Scala。本文将为你提供一步一步的指南&#xff0c;帮助你在 Windows 系统上顺利安装 Intelli…...

Excel文档的读取(1)

熟悉使用Excel的同学应该都知道&#xff0c;在单个Excel表格里想要分商品计算总销售额&#xff0c;使用数据透视表也可以非常快速方便的获得结果。但当有非常大量的Excel文件需要处理时&#xff0c;每一个Excel文件单独去做数据透视也会消耗大量的时间。就算使用Power Query这样…...

Linux:体系结构和操作系统管理

目录 一、冯诺依曼体系结构 1.问题1 2.问题2 二、操作系统管理 一、冯诺依曼体系结构 本章将会谈论一下对冯诺依曼计算机体系结构的理解。 在2024年&#xff0c;几乎所有的计算机&#xff0c;都遵守冯诺依曼体系结构。 冯诺依曼体系结构是应用在硬件层面的&#xff0c;而硬…...

c++ install boost lib

同步系统上的软件包列表 sudo apt-update 整个库安装: sudo apt-get install libboost-all-dev 安装部分库: sudo apt-get install libboost-thread-dev sudo apt-get install libboost-filesystem-dev 链接时加上: -lboost_filesystem -lboost_system 例如: g -Wall -o bo…...

文件加密最简单的方法有哪些?十个电脑文件加密方法【超详细】

在当今数字化和信息化的时代&#xff0c;数据已成为企业最重要的资产之一。内部数据外泄不仅可能导致商业秘密的丧失&#xff0c;还可能对企业的声誉和财务健康造成严重影响。为了有效防止内部数据外泄&#xff0c;企业需要实施综合的防泄密解决方案。以下是十大最佳防泄密解决…...

IPv6地址的表示方法

IPv6地址总长度为128比特&#xff0c;通常分为8组&#xff0c;每组为4个十六进制数的形式&#xff0c;每组十六进制数间用冒号分隔。 例如&#xff1a;2409:8745:039a:c700:0000:0000:0162&#xff0c;这是IPv6地址的首选格式。 为了书写方便&#xff0c;IPv6还提供了压缩格式…...

Kubernetes 之 kubelet 与 CRI、CNI 的交互过程

序言 当一个新的 Pod 被提交创建之后&#xff0c;Kubelet、CRI、CNI 这三个组件之间进行了哪些交互&#xff1f; Kubelet -> CRI -> CNI 如上图所示&#xff1a; Kubelet 从 kube-api-server 处监听到有新的 pod 被调度到了自己的节点且需要创建。Kubelet 创建 sandbo…...

【python】OpenCV—Age and Gender Classification

文章目录 1、任务描述2、网络结构2.1 人脸检测2.2 性别分类2.3 年龄分类 3、代码实现4、结果展示5、参考 1、任务描述 性别分类和年龄分类预测 2、网络结构 2.1 人脸检测 输出最高的 200 个 RoI&#xff0c;每个 RoI 7 个值&#xff0c;&#xff08;xx&#xff0c;xx&#x…...

python安装换源

安装 python 使用演示的是python 3.8.5 安装完成后&#xff0c;如下操作打开命令行&#xff1a;同时按 “WindowsR” > 输入 “cmd” -> 点击确定 python换源 临时换源&#xff1a; #清华源 pip install markdown -i https://pypi.tuna.tsinghua.edu.cn/simple # 阿里…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...