Flexbox兼容性

.flex-container{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

或者

.flex-container {
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
}
时间: 2024-07-31 14:18:43

Flexbox兼容性的相关文章

Flexbox兼容性语法汇总

Flexbox版本 flexbox从第一次出现至今总共有三个语法版本,他们分别是: "display:box;"  —  2009年的老版本 "display:flexbox;"  —  2011年过渡版本/混合版本 "display:flex;"  —  标准版本 规范版本 IE Opera Firefox Chrome Safari 标准版本 IE 11 + 12.10+ * 20+ 21+ ( -webkit- ) 7.0(-webkit-

Flexbox 布局的正确使用方法

Flexbox 布局的正确使用方法 在项目中,我们还会大量使用到flexbox的新旧属性,但大多数人一般只会写新属性,旧属性交由autoprefixer处理,但其实完成同样功能的新旧属性表现形式却不尽相同.还有部分人只使用"万能"的flex:number属性为伸缩项目分配空间,但有些特殊情景却无法满足,此文为此梳理了flexbox的新旧属性区别和分配空间的原理,为大家用flexbox布局的项目通通渠. Flexbox兼容性 PC端的兼容性 移动端的兼容性 如上图,为了兼容IE10-11

前端性能优化 23 条建议

性能优化是把双刃剑,有好的一面也有坏的一面.好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多.并且某些性能优化规则并不适用所有场景,需要谨慎使用,请读者带着批判性的眼光来阅读本文. 本文相关的优化建议的引用资料出处均会在建议后面给出,或者放在文末(有些参考资料可能要梯子才能观看). 1. 减少 HTTP 请求 一个 HTTP 请求过程: 一个 HTTP 请求需要经历以上过程,接下来看一个具体的例子: 这是一个 HTTP 请求,请求的文件大小为 28.4KB. 名词解释: Q

flexbox布局的兼容性

http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高端”浏览器上也是如此,比如Chrome.Firefox.Safari.Android.IOS Safari下支持程度各不相同 网上现有的代码中充斥着各种版本,在Chrome下运行一般都没有问题,Firefox一般也还好,但Android与IOS Safari下就显得非常无力了.之所以会出现这样的局面

[转]关于flexbox

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性. 首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的.在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现. <style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 10

我对Flexbox布局模式的理解

样实现一个div盒子水平垂直居中的.在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现. <style> .container{ width:600px; height:400px; border:1pxsolid#000; position:relative; } .box{ width:200px; height:100px; border:1pxsolid#000; position:absolute; left:50%; top:50%; margi

flexbox应用举例

我们常说的"flexbox"其实包含"父元素","子元素"2个部分,将"父元素"定义为一个flexbox,则在"父元素"里的"子元素们"就被赋予了可以自由伸缩的能力. 赋予神奇能力的代码片段如下: 1.用flex做提示icon 这里用到了flex父元素的"align-items"属性. 指定元素沿侧轴对齐方式 align-item: flex-start | flex

浅谈position、table-cell、flex-box三种垂直(水平)居中技巧

一.首先是喜闻乐见的position方法,经典且万能,用法如下: 1 父元素{ 2 position:relative; 3 } 4 子元素{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 margin-top:/*该元素height*0.5的负值*/; 9 margin-left:/*该元素width*0.5的负值*/; 10 } 不需要水平居中可以去掉left和margin-left.  划重点:需要父元素和子元素都定义宽高,自适应是不可能自适应

React Native之FlexBox介绍与使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 CSS 的布局方式,CSS 是基于盒子模型,依赖于 dis