flex布局 个别手机基线没对齐 数字偏上

于 2022-11-08 09:50:41 发布
阅读量251 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/well_kk/article/details/127744679
版权

先看现象
这里我用了flex布局 但是在红米手机上没对齐的这种现象就特别明显

在这里插入图片描述
后来观察页面发现，只有数字、英文会存在这种情况，查询后得知一个以前没有注意过的配置，

1. 简体中文页面：html lang=zh-cmn-Hans 表示普通话/国语

  1. 繁体中文页面：html lang=zh-cmn-Hant

  2. 英语页面：html lang=en
    参考文章：
    https://zhidao.baidu.com/question/1112775171244083099.html
    https://blog.csdn.net/shadow_zed/article/details/97711473?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-8-97711473-blog-49150339.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-8-97711473-blog-49150339.pc_relevant_landingrelevant&utm_relevant_index=8
    https://www.jianshu.com/p/b9b3133e80b1

well_kk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置侧轴上子元素排列方式_flex布局
weixin_30278943的博客
12-28 647
移动端开发之flex布局体验传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或者更低版本，不支持或仅部分支持建议如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局flex布局体验HTML结构111css样式span直接给宽...
flex 布局文本与数字不水平对齐问题?给父元素加一个行高
qq_42859450的博客
11-27 1464
父元素：.appt-box { display: flex; align-items: center; } 如下图：文本和数字不在同一水平线上，原因：数字的高小于文本的高，给父元素添加一个行高可解决 父元素：.appt-box { display: flex; align-items: center; line-height: .3rem;//大小自己设置 } 加行高之后的效果如下： ...
安卓真机上字体有偏离无法完全居中对齐
yangxiqian的博客
05-05 3231
许多人在真机上面查看html会发现很多文字有偏离无法完全居中对齐，解决方案为给<html></html>标签加上lang="zh-cmn-Hans";再给无法居中的标签加上中文字体，例如font-family:'宋体' ;产生此类问题是由于安卓手机对一些非中文字体无法居中。例如 (flex兼容性代码省略)<div class="info flex">      ...
flex布局
GY的博客
07-15 276
决定了元素在主轴上的排列方式，默认是flex-start左对齐，center居中；space-between两侧对齐，项目之间的间隔相等；flex是flex-grow、flex-shrink和flex-basis三个属性的缩写；它的值为1的话就是flex-grow为1，元素占据剩余宽度的一份；center居中；warp-reveser换行，第一行在下方；经常用做自适应布局，将内容区设置为flex1，内容区则会自动放大占满剩余空间。是flex-direction和flex-wrap的简写形式；......
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 ... <div class=list></div> <div class=list></div> <div class=list></div> ...
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { ... display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
Flex布局——属性
小花魁的博客
11-30 402
Flex布局——属性标签（空格分隔）： flex布局简介 现在网页布局比较流行的是div布局，但是深有体会的是例如垂直居中就不是很容易实现，虽然网上给了好多方案，但都稍麻烦；相对来说，Flex布局就可以用简简单单几个属性就能完成各种各样的布局 有人可能会担心浏览器的支持 浏览器 支持的版本 IE 10+ FireFox 22+ Chrome 21+ Opera
flex布局快速上手
Yuki_Aruki的博客
05-06 688
参考博文 做了一些筛选和概括,只归纳了简单的部分 首先给父元素添加display:flex 然后设置父元素flex的属性: 1.flex-direction确定排列顺序 row（默认）：从左到右 row-reverse：右到左 column：上到下 column-reverse：下到上 2.flex-wrap确定换行 Nowrap(默认):不换行,内容超过屏幕尺寸会被挤压 Wrap:正常换行,第一行在上面 Wrap-reverse:换行,每一行的内容顺序不变化,第一行位于容器底部,倒序排列 *flex-fl
红米手机适配 H5适配 移动端适配问题
王敬辉的博客
05-21 766
这几天做个H5页面，采用的媒体查询+scss+rem的方式做的适配。 测试中遇到了一个问题，其他设备上布局都正常，唯独红米出现了bug(两侧有余白) 红米手机出问题图：正常显示图 应该是这个手机机型没有兼顾到，使用@media(媒体查询)没有包含在内。 就写了两句简单的代码：var w=window.screen.width; alert(w); 用红米note7pro手机打开这个页面，就能看到弹出的屏幕宽度393px，真是奇葩；
flex布局下无法靠右对齐，实现靠右对齐方法
oops
05-20 3267
在flex布局的时候有时候我们在设置justify-content: end;属性的时候因为被其他盒子影响而无法靠右对齐 这时因为浮动在flex布局下也不能使用的时候我们可以用到这个方法轻松解决 div { margin-left:auto; } 这个属性可在不适用浮动的情况下让盒子靠右对齐 ...
Flex布局详解
热门推荐
半亩方糖
03-31 11万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
flex 弹性布局
weixin_53588068的博客
04-17 389
原理 ：通过给父盒子添加flex属性来控制滋子盒子得位置和排列方式 常见父项属性： （1）flex-direction:设置主轴方向 （2）justify-content:设置主轴子元素排列方式 （3）flex-wrap:设置子元素是否换行 （4）align-content:设置侧轴上得子元素得排列方式（多行） （5）align-items:设置侧轴上得子元素排列方式（单行） （6）flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap 1.主..
使用flex布局后文字位置发生偏移如何解决
qq_43504355的博客
05-01 4395
使用flex布局后文字位置发生偏移如何解决 在页面排版过程中有时候会用到flex进行页面的布局设置,将文字对齐到一行中,但是使用后发现会发生文字的偏移 页面代码 <div class="title_head"> <div class="title_context"> <h2>管理后台</h2> <a&g...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 726
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css flex制做从上往下的div
小小少年
03-21 3204
从上往下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no,
flex 上下布局对齐
最新发布
09-09
`：项目在基线上对齐。 - `align-items: stretch;`：项目被拉伸以适应交叉轴的大小。 此外，还可以使用 `align-self` 属性来单独为某个项目设置对齐方式。 例如，下面的代码将实现一个上下布局，并将项目在交叉轴...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值