首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >不同大小的文字底部对齐,为什么不能使用flex-end

不同大小的文字底部对齐,为什么不能使用flex-end

原创
作者头像
扰乱
发布于 2023-10-24 08:31:48
发布于 2023-10-24 08:31:48
1.7K00
代码可运行
举报
文章被收录于专栏:前端样式前端样式
运行总次数:0
代码可运行

flex容器下,不同大小的文字底部对齐,为什么应该使用 baseline 而不是 flex-end?

背景-从一个兼容性Bug说起

看一下最简单的例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="container" style="display: flex;align-items: flex-end">
    <div class="big-text" style="font-size: 26px">大字体</div>
    <div class="small-text" style="font-size: 14px">小字体</div>
</div>

运行的效果如下:

可以看到两个字体所在矩形虽然对齐了,但是两个文字的底部并没有对齐。 分析原因发现,是因为文字周围有一圈空白的边距,这个边距在字体大小不同的情况下是不一致的,所以矩形区域虽然对齐了,但是文字底部没有对齐。而这个边距其实和 line-height 有关,所以首先来看看如何从 line-height 的角度出发解决问题。

line-height 的角度解决

为什么你不应该使用 line-height: 1

首先想到的就是把文字周围的边距给彻底去掉,也即设置 line-height: 1,那么为什么说不应该使用这种方式呢?有以下几个原因:

  1. line-height: 1 的情况下,文字如果长度不定,出现了换行,就会出现两行文字紧贴在一起的情况,如下。因为 line-height 被用来去掉边距了,所以无法再调整换行后文字的行距了。
  1. line-height: 1overflow: hidden 会出现字体上下部分被剪切的问题,如下。这里有点反直觉,line-height: 1 直觉上应该和字体的高度是一致的,但是在实际运行过程中发现,并不是这样的,主要和设备的字体有关,这里后面再详细探讨具体原因。

使用 line-height 的正确方法

在完全去掉周围边距这种方法不可用的情况下,只能通过把不同字体大小的透明边距宽度设置为一致就可以了。基本原理是 矩形区域高度 = (line-height) ≈ (fontSize + 透明边距)。

修改代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="container" style="display: flex;align-items: flex-end">
    <div class="big-text" style="font-size: 26px;font-size: 30px">大字体</div>
    <div class="small-text" style="font-size: 14px;font-size: 18px">小字体</div>
</div>

运行效果如下:

这样就把透明边距都控制为2px,让文字近似做到了底部对齐的效果。

关于 line-heightfont-size 和 矩形大小的更具体内容可以参考这篇掘金文章,非常清楚: https://juejin.cn/post/6971673576017494053

终极解决方案-align-items: baseline

可能更多人使用的是 align-items 的 flex-startcenterflex-end 这几个特性,很少使用 baselinefirst baselinelast baseline,但是在文字对齐上,后面的这三个特性更有用。

经过实测,align-items: baseline 可以完美的做到文字的底部对齐,修改代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="container" style="display: flex;align-items: baseline">
    <div class="big-text" style="font-size: 26px">大字体</div>
    <div class="small-text" style="font-size: 14px;">小字体</div>
</div>

运行效果:

align-items: baseline
align-items: baseline

个人理解,前面比较经常用的一些属性值主要是用于盒子的对齐,而 baseline 相关的三个属性值,是让盒子内文字的 baseline 对齐。而 first baselinelast baseline 应该是在多行文本情况下有多个 baseline 的情况时,要对齐第一个 baseline 还是最后一个 baseline,实测如下:

  1. first baseline
align-items: first baseline
align-items: first baseline
  1. last baseline
align-items: last baseline
align-items: last baseline

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
7b2美化-添加好看的底部介绍
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
7680
7b2美化-添加好看的底部介绍
css伸缩布局 (中),讲解的到位。哈哈哈。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px;padding: 0px; } ul { list-style: none; width: 600px;
贵哥的编程之路
2020/10/28
5300
vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面
.chatRow 中的 align-items: flex-end; 让其子元素在底部对齐,实现头像垂直方向靠下对齐
唯一Chat
2023/01/15
5.1K0
h5应用如何适配移动端(干货总结)
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结
用户10501441
2024/08/18
3650
flex 布局查漏补缺
平时开发各种布局基本上可以 flex 一把梭,不用再纠结 float 这个神奇属性了。但一直又没有专门去记忆一下 flex 的属性,开发的时候还是顺手百度下属性的含义,略显不够专业[旺柴]。索性抽时间把每个属性就都总结下吧,查漏补缺。
windliang
2022/09/23
7350
flex 布局查漏补缺
利用 cloudflare一分钟生成一个导航站
那么我们今天要介绍的这个项目(CF-Worker-Dir),它是一款适用于Cloudflare Worker平台上的云函数程序,无需服务器,而且在一分钟之内就可以部署好自己的一个导航网站。github地址如下:https://github.com/sleepwood/CF-Worker-Dir 。
huolong
2024/12/25
4190
利用 cloudflare一分钟生成一个导航站
行高、(顶线、中线、基线、底线)、vertical-align
行框高度是行内最高的行内框高度,通过line-height调整,内容区高度与字体尺寸有关,padding不对行高造成影响。设置padding增加的是 行内框(内容区)向外扩散的距离。但行高还是不变的,也就是说,如果padding设置的比行高大,就会出现行内框 > 行框的现象。但是在文档流中,padding是会占据空间的,如果有父元素,父元素的高度还是按照行高来决定。
小小范
2021/12/29
2.4K0
行高、(顶线、中线、基线、底线)、vertical-align
Flex弹性布局
取值:row(默认) | row-reverse | column | column-reverse
ymktchic
2022/01/18
1.6K0
Flex弹性布局
【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
韩曙亮
2023/10/11
1.1K0
【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )
大转盘设置漂浮物
大转盘.jpg 选择漂浮物.jpg <!--大转盘--> <div class="shareLeft"> <div class="sharePosition"> <div class="shareBigTitle"> 幸运大转盘 </div> </div> <div class="shareBg"> </div> <div class="shareInside"> <div class="
lyudev
2022/08/04
2.4K0
大转盘设置漂浮物
CSS魔法堂:Flex布局
 Flex是Flexible Box的缩写,就是「弹性布局」。从2012年已经面世,但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血。
^_^肥仔John
2018/06/21
6260
uni-app(3.flex布局)
在pages下新建页面flex-direction,并在pages.json中将flex-direction页面设为首页
玩蛇的胖纸
2021/06/24
1.8K0
flex深度剖析-解决移动端适配问题!
上回说到,移动端适配,推荐了,使用px为主,vw,百分比为辅助,再搭配flex的布局方式,于是有人就开始问我了,这个flex搭配布局应该怎么用,梳理一遍,巩固一下
用户7413032
2020/06/11
2.3K0
flex深度剖析-解决移动端适配问题!
详解CSS Flexbox,附带示例
英文 | https://medium.com/javascript-in-plain-english/css-flexbox-explained-with-examples-85efa38e4770
winty
2021/02/05
1.5K0
详解CSS Flexbox,附带示例
CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的float,clear,vertical-align属性失效 不能继承flex框,但可以依次设置 可以修改flex流的方向以及布置规则          现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性   将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如
欲休
2018/03/15
1.5K0
CSS3的flex布局
53·[Vue项目]旺财记账-记账页面样式
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
1K0
53·[Vue项目]旺财记账-记账页面样式
css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」
在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法;
全栈程序员站长
2022/06/27
4.1K0
css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」
CSS 入门指南:轻松掌握网页布局与样式设计的艺术
CSS(Cascading Style Sheets,层叠样式表)是一种用于为HTML元素添加样式的语言。CSS决定了页面上元素的外观:颜色、字体、布局等。
方才编程_公众号同名
2024/09/24
8830
CSS 入门指南:轻松掌握网页布局与样式设计的艺术
Flex布局教程
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
訾博ZiBo
2025/01/06
2550
Flex布局教程
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )
首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
韩曙亮
2023/10/11
1.2K0
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )
推荐阅读
相关推荐
7b2美化-添加好看的底部介绍
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档