CSS Flexbox 的跨浏览器支持

Posted

技术标签:

【中文标题】CSS Flexbox 的跨浏览器支持【英文标题】:Cross Browser support for CSS Flexbox 【发布时间】:2013-07-01 03:10:24 【问题描述】:

我一直在使用下面提到的代码,它适用于我的 Chrome,但不适用于我的 IE9 和 Safari。

我搜索了解决方案,尽管我得到了各种供应商前缀,但这些结果让我感到困惑。

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>

【问题讨论】:

记得编辑问题并添加代码。 这个问题可能有用:***.com/questions/15662578/… 【参考方案1】:

CSS Flexbox 模型针对 UI 设计进行了优化。 它的开发主要是为了避免溢出父元素。当祖先元素大小受到限制时,它将缩小子元素。当祖先元素大小扩展时,它将通过扩展子元素的大小来填充空间。 Flex 容器的收缩和扩展行为可能会因最小和最大宽度/高度属性而中断。

CSS FlexBox 版本(按版本)

W3 2009:显示:盒子;

box-align                start | end | center | baseline | stretch  
box-direction            normal | reverse | inherit
box-flex                 <number>   0.0
box-flex-group           <integer>  1
box-lines                single | multiple
box-ordinal-group        <integer>  1   visual
box-orient               horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements    no  no  visual
box-pack                 start | end | center | justify 

W3 2011:显示 flexbox |内联弹性盒

flex-align        auto | baseline   auto
flex-direction    lr | rl | tb | bt | inline | inline-reverse | block | block-reverse   flexboxes   no  lr | rl | tb | bt
flex-order        <integer> 1   
flex-pack         start | end | center | justify    

W3 2012:显示弹性 |内联灵活

align-content    flex-start | flex-end | center | space-between | space-around | stretch    
align-items      flex-start | flex-end | center | baseline | stretch
align-self       auto | flex-start | flex-end | center | baseline | stretch                 
flex-direction   row | row-reverse | column | column-reverse
flex-flow        <'flex-direction'> || <'flex-wrap'>    
flex-grow        <number>   ‘0’ 
flex-shrink      <number>   ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order            <number>   0

【讨论】:

【参考方案2】:

要涵盖所有 Flexbox 实现,您的 CSS 应如下所示:

.foo 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

但是请注意,除非您要覆盖先前的 flex-direction 声明,否则不需要指定 flex-direction: row:row 是默认方向。另请注意,IE10 是第一个支持 Flexbox 的 IE 版本。

【讨论】:

【参考方案3】:

不幸的是,IE9 根本不支持 Flexbox。 IE10支持2011版本。

Opera 12.1+ 支持不带前缀的最新 2012 版本。 Chrome 30+ 和 IE11+ 也将支持它。 Firefox 22 也已经支持它,但只是部分支持——它不支持 flex-wrap 属性和 flex-flow 简写。

以前版本的 Firefox、Chrome 和 Safari 3.1+ 支持 2009 版本。 Chrome 21+ 也支持带前缀的 2012 版本。

【讨论】:

【参考方案4】:

我建议阅读规范以完全理解:http://dev.w3.org/csswg/css-flexbox/

对于具有视觉头脑的@chris-coyier 最近在 (@hugo-giraudel) 的帮助下修改了他的帖子:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

代码示例:直播(感谢@chris-coyier 只是找不到原帖,所以重新制作):http://cdpn.io/oDxnp

编译出来的样子是这样的

显示:弹性; =>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

弹性方向:行; =>

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

【讨论】:

【参考方案5】:

我的 Flexbox css:我已经在 android 2.3.3 和 ios 的多个设备上进行了测试,并且工作正常:

.flex-container 
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;



.item 
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

【讨论】:

以上是关于CSS Flexbox 的跨浏览器支持的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox

CSS 使用Sass的跨浏览器CSS渐变

CSS 具有RGBA的跨浏览器CSS Box Shadows

CSS 具有框阴影的跨浏览器无图像阴影

CSS 用于Sublime Text 2的跨浏览器线性渐变

DOM Mutation Observers 的跨浏览器支持情况如何?