flex布局在ios8上的兼容性问题

最新推荐文章于 2023-05-05 13:29:58 发布
最新推荐文章于 2023-05-05 13:29:58 发布
阅读量1.6w 收藏 5
点赞数
分类专栏： 易忽略点 文章标签： webkit flex 布局 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hicoldcat/article/details/78134893
版权

最近在做项目时，使用到了flex布局。其他ios版本都还好，唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现，safari使用的是webkit内核，在ios8上需要单独加一下兼容才起作用。

display: flex;
display: -webkit-flex; 
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
...

坑到跳时方觉深啊！

李留白
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022-09-30 解决弹性布局flex中,align-item无法居中的问题
GAARA
09-30 1038
文章目录 问题出现 解决方法 效果 height:100%和height:100vh的区别 问题出现 .container{ display: flex; justify-content: center; align-items: center; } #box{ width: 100px; height: 100px; background-color: #1890FF; }
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动
解决 flex align-items：center 无法居中（微信小程序）
热门推荐
weixin_42371145的博客
07-16 1万+
转自：https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛 因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 1.确定好自己的主轴方向是不是row，如果是co...
微信小程序-----Flex布局（如何安排居中）
小白巨白的博客
02-11 1669
微信小程序-----Flex布局 微信中display表示布局显示，有两种形式一个是block，一个是flex。 block，代表一种盒子，表达一种占整个宽的一个长条 flex，（flexiable灵活的）代表灵活的表达方式 对于block，简单的理解为盒子布局 而flex是灵活性de 一般来说： 1、display:flex/column 说明将布局方式变成灵活性的 2、flex-directi...
解决flex gap兼容性问题
wz9608的博客
05-05 5501
一个项目写下来，在网页端预览的时候正常，结果到产品经理手上。设计稿样式实际产品手机上样式产品：“你这玩意儿怎么没间距？我：“为什么我的正常？？？呐呐呐你看我手机（来自RedmeK50Utral）”产品：“哦，你看我的手机（来自荣耀20）”我：“。。。至此我看了看我代码中的一堆gap，再看了看她那还不退休的老安卓，陷入了沉思！以上就达到了gap同样的效果，并且保持了良好的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦！总之不管用的什么打包工具，vite也要webpack也好，原理是一样的。
flex安卓手机、苹果手机兼容问题
qq_21138747的博客
12-14 710
justify-content: space-evenly; */ //安卓手机上面的代码无效，苹果手机没问题 //换成下面的代码就行 justify-content: space-around;
display：flex不兼容Android、Safari低版本的解决方案 【flex布局】
itKingOne的博客
01-22 6238
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>flexbox布局title> style> div { border: 1px solid #000; overflow: hidden; } div.flex-h:before, div.
flex兼容ios（iphone6）
wanda000的博客
03-04 564
开发过程使用flex简直不要太6，但是如果只是写新版本的语法形式，是肯定存在兼容性问题的（安卓机基本没啥问题，主要是ios） 一、问题 flex布局分为旧版本dispaly: box；过渡版本dispaly: flex box；以及现在的标准版本display: flex； Android 2.3 开始就支持旧版本display:-webkit-box; 4.4 开始支持标准版本disp...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
Flex布局在小程序的使用
03-29
而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
css中元素垂直居中和水平居中方式
发果叁
05-25 952
水平居中方案 text-align: center text-align: center可以使行内级元素和行内块级元素在父元素中水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
iOS 自动布局和弹性盒子
kmyhy的专栏
12-11 4001
当同事问到我这个问题时，我脑子中直接冒出了一个词“弹性盒子”。 问题： 有一个 Cell 中有 4 个并排排列的控件，布局如下图所示：假设： 1、        这些控件高度和y坐标固定。2、        蓝色控件x位置固定，但右端对齐于黑色控件。3、        黑色、红色、绿色控件宽度固定，右端对齐于右侧的控件（绿色控件右对齐于cell 的右边）。 要求：1、        当黑色、红色、
flex布局解决align-items失效，无法居中问题
qq_36608036的博客
02-27 1万+
1.flex布局 #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; } 上面的布局会出现无法垂直居中的问题 这是因为main缺少高度，100%的高度仍然不起作用，最好使用100vh来设置，这样就可以解决这个问题。 在#main样式里加上：height: 100vh; #m
iPhone 7/8plus 样式兼容性问题
weixin_42560424的博客
07-11 464
苹果兼容性问题，图片兼容性，样式兼容性，弹性盒子
css flex布局iOS8兼容性问题
lzc的博客
07-25 8418
cssflex布局iOS8兼容性问题，大多数情况下都能够通过兼容性写法解决，比如： div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row; } 如果以上兼容性写法还不能解决问题，那就要...
CSS中flex对部分IOS版本兼容性问题
AI_huihui的博客
04-22 6855
众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！
flex 布局问题
loshirleyve的博客
09-17 403
http://blog.csdn.net/oudoni/article/details/64442741 用weui做微网站陷入了flex布局的坑。 flex与text-overflow配合效果一直都不是很理想。查阅了不少资料都无法解决问题（基本上能搜到的资料都是2层结构的，即flex容器与flex项两层，而自己的项目里面是有多层结构的，所以一直搭配不良）。 最后，多次尝试后终于解决问题。 即除了t
flex布局浏览器兼容性
最新发布
11-30
下面是Flex布局在不同浏览器中的兼容性情况： - Chrome、Firefox、Safari、Opera、Edge等现代浏览器都支持Flex布局，且支持程度较好。 - IE10及以上版本也支持Flex布局，但需要使用-ms前缀。 - 在移动端，iOS 6以上...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值