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 的跨浏览器支持的主要内容,如果未能解决你的问题,请参考以下文章