CSS Flexbox 的跨浏览器支持

Posted 2023-03-05

【中文标题】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+ */