html5 - display:box 和 display:flex 两者区别 ?
天蓬老师
天蓬老师 2017-04-17 11:46:20
0
1
773

想听大家的说法,不要copy了。

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(1)
大家讲道理

Only the flex syntax specification has been updated in several versions:

  • The former display:box is the 2009 syntax version. You need to add the browser prefix when using it, but it is now outdated.

  • The latter display:flex is the latest revised grammar version in 2012, which has better browser support and will become the standard grammar in the future.

  • In 2011, a strange syntax version display:flexbox was also proposed. It was unofficial and was mainly used by IE browser at that time.

display:boxBrowser support:

IE Firefox Chrome Safari Opera
不支持 2.0-40.0
(-moz-)
4.0-45.0
(-webkit-)
6.0-8.0
(-webkit-)
15.0-29.0
(-webkit-)

display:flexBrowser support:

IE Firefox Chrome Safari Opera
11.0+ 22.0+ 21.0+(-webkit-)
29.0+
6.1+(-webkit-)
9.0+
15.0+(-webkit-)
17.0+

The more complete compatibility code is as follows:

.box {
    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+ */
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!