移动端flex布局遇到错误

最新推荐文章于 2024-08-23 14:45:51 发布
最新推荐文章于 2024-08-23 14:45:51 发布
阅读量307 收藏
点赞数
分类专栏： 前端 文章标签： html html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Holeran/article/details/112905975
版权

在这里插入图片描述
在这个布局中出现这种情况的原因没太了解，就是居中不了不知道是什么原因

在这里插入图片描述这两行代码交换位置就正确了
我感觉应该是权重的问题
normalize.css是初始话文件，index.css是index的样式
代码在执行时是从上到下执行的
如果在权重相同时index.html应该执行normalize.css的样式，所以在以后写代码时应该注意样式前后的问题

在这里插入图片描述

Holeran
关注
专栏目录
弹性布局flex实现移动端“头尾固定，中间区域滑动”效果
丹
11-09 1598
头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局。 <body> <div class="flex-wrap"> <div class="header">Head...
GaiaX开源解读 | 给Stretch（Rust编写的Flexbox布局引擎）新增特性，我掉了好多头发
阿里文娱技术
12-15 989
GaiaX（盖亚），是在阿里文娱内广泛使用的Native动态化方案，其核心优势是性能、稳定和易用。本系列文章《GaiaX开源解读》，带大家看看过去三年GaiaX的发展过程。
flex布局，vivo手机，安卓5.1时，高度不随内容所撑开
satisfy
12-20 3348
页面布局采用flex布局，parent为flex，head和footer有固定高度，content没有固定高度，高度随内容撑开，但是这个时候，vivo手机上，安卓5.1时，content的高度不随内容为变化
当移动端H5中的display:flex不生效时，给我整破防了
最新发布
weixin_47389477的博客
08-23 424
在项目开发中遇到一个“更多”按钮放置于卡片的右下角时，在安卓9版本的浏览器打开项目，结果测试出来“更多”按钮样式错乱，做了这么久的开发，在移动端给我整破防了。情况紧急，于是更换成position:relative定位来实现，最后可以实现效果。现在想知道如何是什么原因造成的。display:flex布局，使用比较灵活，但是这个css特性是新的，老版本的浏览器不兼容，有时候使用就会失效。position的定位，一般来说就是子绝父相，在文档流中不占据位置，同时可以使用z-index来设置层级。
移动端flex布局经验总结
qq_44441669的博客
08-03 569
flex布局（弹性布局） 2.布局原理 2.1 flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=flex布局。 总结flex布局原理： 就是通过给父盒子添加flex属性，来控制...
移动端flex左右布局填坑
weixin_33719619的博客
05-21 294
相信很多小伙伴都遇到过 以上这种问题，flex布局之后因为左边的标题太长，导致挤压了右边的图片 ！！！但是这个图片明明给了固定宽，居然还会被挤压，但是 移动端一般右边这些文字盒子不是固定宽，所以我们不能给右边固定宽 最终解决方法，左边盒子flex-shrink:0 完美解决 ...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 856
<!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...
postcss-flexbugs-fixes插件解决Flex布局兼容性问题
Flex布局是一种现代化的CSS布局方式，在响应式设计和移动端开发中广泛应用。与传统布局相比，Flex布局具有以下优势： - 简单易用：使用简单的属性和值，能够快速实现复杂的布局效果。 - 响应式：能够根据不同设备的...
CSS3布局与Header实现：float vs Flexbox
首先，关于布局，通常在移动端，Header常使用`fixed`定位，以便始终保持在屏幕顶部。然而，`fixed`布局在不同设备和浏览器之间可能存在兼容性问题，需要开发者进行细致的测试和调整。另外，对于Hybrid应用，Header...
移动端开发注意的事宜
weixin_44465584的博客
03-16 4813
1.什么是移动端开发？以及开发的工具？有哪些方式？ 移动开发也称为手机开发，或叫做移动互联网开发。是指以手机、PDA、UMPC等便携终端为基础，进行相应的开发工作，由于这些随身设备基本都采用无线上网的方式，因此，业内也称作为无线开发。 移动应用开发是为小型、无线计算设备编写软件的流程和程序的集合，像智能手机或者平板电脑。移动应用开发类似于Web应用开发，起源于更为传统的软件开发。但关键的不同在于移...
网易云音乐接口vue全家桶开发一款移动端音乐webApp
08-10
Vue.js提供了适应不同屏幕大小的工具和插件，如Vue Flex布局组件。 6. **音乐播放功能**：应用的核心功能之一是音乐播放，这涉及音频元素的控制、播放列表管理、进度条显示、音量控制等。Vue.js可以通过监听事件和...
webview设置导致app内嵌网页布局乱掉的其中一种问题解决
weixin_34319374的博客
05-21 2836
对app内嵌网页接触不多，这里描述的是一种内嵌网页布局乱掉的可能原因： 关键字：“webview控件”、“setUseWideViewPort属性”、“meta标签” 参考文章： Android开发填坑之setUseWideViewPort 情景 近期接到一个bug反馈，说一份网页代码放在一个第三方提供的app内显示布局乱掉了，但是这份代码在手机端浏览器是可以正常显示的； 简单的处理过程 ...
记一次flex-shrink的问题
qq_34258791的博客
02-01 518
mobile的轮播图的错误显示问题，大概也就是320宽的屏幕，4张图，每张图显示只有80px 1.flex-shrink的默认值是1，所以算法也就是 originImageWidth(我的测试图为750) - width * flex-shrink/weight * totalWidth 2.以一张750图为例，在宽度是320的屏幕里，可套公式： 750 - 750*1/3000 * 2680 =...
低版本ios、安卓手机 css的flex布局兼容问题
han_calligrapher的博客
02-01 1762
在iphone5手机中，flex布局失效。解决方案如下： 在package.json中加上： "browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8", "ios &gt;= 3", "android &gt;= 2" ] 在vue1.
移动端布局之flex布局
Wanan_J的博客
01-14 968
弹性布局 flex布局 常见属性
flex布局遇到过的小问题
qiqi_77_的博客
03-01 6870
想要使用flex布局实现上面这种效果，html:&lt;ul&gt;     &lt;li&gt;&lt;span&gt;&lt;/span&gt;&lt;/li&gt;     &lt;li&gt;&lt;img width="100%" src="https://dummyimage.com/400x400/f5a2a5/FFF&amp;text=product-
设置flex:auto时,内容超出导致布局出错
智韬的博客
07-06 513
场景： 现在页面中存在4个盒子， 其中两个盒子为固定宽度， 另外两个盒子对剩余空间进行等分，并且根据内容进行滚动条显示 期望的效果： 尝试使用flex布局实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
css flex布局iOS8兼容性问题
lzc的博客
07-25 8520
cssflex布局iOS8兼容性问题，大多数情况下都能够通过兼容性写法解决，比如： div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row; } 如果以上兼容性写法还不能解决问题，那就要...
移动端flex布局案例
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html <div class="container"> <div class="nav"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> </div> ``` CSS代码： ```css .container { display: flex; justify-content: center; } .nav { display: flex; justify-content: center; } .nav a { margin: 0 10px; } ``` 在上述代码中，我们首先将外部容器设置为`display: flex;`，这样它的子元素就会按照Flex布局排列。然后我们使用`justify-content: center;`将子元素在水平方向上居中对齐。 内部的导航栏元素也被设置为`display: flex;`，以便其子元素在水平方向上排列。我们使用`justify-content: center;`将导航栏链接按钮在水平方向上居中对齐。 最后，通过设置`margin: 0 10px;`来为导航栏链接按钮之间添加一些间距，使其看起来更美观。 这就是一个简单的移动端Flex布局案例，希望对您有所帮助！如果您有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值