移动端ios8的flex兼容性问题

最新推荐文章于 2025-01-09 09:42:00 发布

原创最新推荐文章于 2025-01-09 09:42:00 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#兼容ios8

兼容专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用CSS的display属性开启弹性布局，包括新旧版本的语法兼容性处理，以及如何设置主轴和副轴，实现元素的空间分配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开启弹性布局
display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 


-webkit-flex: 1;        /* Chrome */  
flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1  ;   /* OLD - iOS 6-, Safari 3.1-6 */  

副轴变主轴
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;


-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-pack:justify;