css - CSS Flexbox 的跨浏览器支持

Question

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

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

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

Answer 1

要涵盖所有 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: row除非您覆盖先前的 flex-direction 声明，否则不需要指定：row 是默认方向。另请注意，IE10 是第一个支持 Flexbox 的 IE 版本。

Answer 2

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

Answer 3

我的 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+ */
}

Answer 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;

Answer 5

不幸的是，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 版本。