Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of Flexbox browser compatible knowledge points, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this Flexbox browser compatible knowledge point. Let's take a look at it.

History

From 2009 to now, flexbox has experienced three ways: display:box;, display:flexbox and now display:flex.

If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell:

If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box- {*}, you are looking at the old 2009 version of Flexbox.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex () function, you are looking at an awkward tweener phase in 2011.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex- {*} properties, you are looking at the current (as of this writing) specification.

When flexbox was first defined, in fact, after the first version was defined in 2009, browser vendors took the lead in implementing the functionality of display:box. In 2011, people are not satisfied with the original features, in order not to change the original support for display:box, there will be display:flexbox;. Later, the specification is gradually mature and the function needs to be improved, so when it comes to display:flex, who knows whether it will change or not.

Support situation

Let's take a look at support from caniuse.

Display:box; partial support with prefix-webkit- everything except Firefox

Display:flexbox support is also good.

Display:flex found almost the same level of support as the previous one.

To sum up, in addition to Opera mobile12, and IE, all major browsers support the old syntax of flexbox.

Note: the attribute of wrap has only been added to the latest syntax, so the old version certainly does not support it.

Solution

From the above research, we can see that the latest flex is compatible with the previous syntax, but there are some new grammars. So the obvious way to solve this compatibility problem is to add the old syntax, which can solve some browsers that support the old syntax.

Flexbox is divided into container and item, so the compatible writing is also divided into two parts.

Container

.grid {

Display:-webkit-box; / * Chrome 4, Safari 3.1, iOS Safari 3.2 + * /

Display:-webkit-flex; / * Chrome 21, Safari 6.1, iOS Safari 7, Opera 15, 16 * /

Display: flex; / * Chrome 29, Firefox 22, IE 11, Opera 12.1, 17 18, Android 4.4 + * /

}

Item

. grid-cell {

-webkit-box-flex: 1

-webkit-flex: 1

Flex: 1

}

When you see this, you may have questions, so aren't you tired of writing so many prefixes at a time? We have the tools:

We can use tools like autoprefixer or sass\ less to write css. In addition, Amway, a mixin of sass, you can take a look at compass-flex.

Another way is to write it entirely in the old version of display:box, so that there is basically no problem except that some new features such as flex-wrap are not available (if you don't think it is necessary to use them). Here is a copy of the grid system written by a friend (it is said to be compatible with Android2.3):

.row {

Width: 100%

Margin: 0

Padding: 0

Box-sizing: border-box

Height: auto

Display: block

Zoom: 1

}

.row.flex: after {

Display: none

}

.row.flex > .col-flex

.row.flex > .col

.row.flex > .col-1

.row.flex > .col-2

.row.flex > .col-3

.row.flex > .col-4

.row.flex > .col-5

.row.flex > .col-6

.row.flex > .col-7

.row.flex > .col-8

.row.flex > .col-9

.row.flex > .col-10

.row.flex > .col-11

.row.flex > .col-12 {

Float: none

}

.row.flex > .col-flex {

-webkit-box-flex: 1

}

.row: after {

Content: ""

Visibility: hidden

Display: table

Height: 0

Clear: both

}

.row > .col

.row > .col-1

.row > .col-2

.row > .col-3

.row > .col-4

.row > .col-5

.row > .col-6

.row > .col-7

.row > .col-8

.row > .col-9

.row > .col-10

.row > .col-11

.row > .col-12 {

-webkit-box-flex: 0

Padding-left: 0

Padding-right: 0

Display: block

Float: left

}

.row > .col-1 {

Width: 8.33333%

}

.row > .col-offset-1 {

Margin-left: 8.33333%

}

.row > .col-2 {

Width: 16.66667%

}

.row > .col-offset-2 {

Margin-left: 16.66667%

}

.row > .col-3 {

Width: 25%

}

.row > .col-offset-3 {

Margin-left: 25%

}

.row > .col-4 {

Width: 33.33333%

}

.row > .col-offset-4 {

Margin-left: 33.33333%

}

.row > .col-5 {

Width: 41.66667%

}

.row > .col-offset-5 {

Margin-left: 41.66667%

}

.row > .col-6 {

Width: 50%

}

.row > .col-offset-6 {

Margin-left: 50%

}

.row > .col-7 {

Width: 58.33333%

}

.row > .col-offset-7 {

Margin-left: 58.33333%

}

.row > .col-8 {

Width: 66.66667%

}

.row > .col-offset-8 {

Margin-left: 66.66667%

}

.row > .col-9 {

Width: 75%

}

.row > .col-offset-9 {

Margin-left: 75%

}

.row > .col-10 {

Width: 83.33333%

}

.row > .col-offset-10 {

Margin-left: 83.33333%

}

.row > .col-11 {

Width: 91.66667%

}

.row > .col-offset-11 {

Margin-left: 91.66667%

}

.row > .col-12 {

Width: 100%

}

.row > .col-offset-12 {

Margin-left: 100%

}

.flex {

Display:-webkit-box

Display: box

-webkit-box-orient: horizontal

Box-orient: horizontal

}

.flex.vertical {

-webkit-box-orient: vertical

Box-orient: vertical

}

.flex.start {

-webkit-box-pack: start

}

.flex.center {

-webkit-box-pack: center

}

.flex.end {

-webkit-box-pack: end

}

.flex.justify {

-webkit-box-pack: justify

}

.flex.top {

-webkit-box-align: start

}

.flex.middle {

-webkit-box-align: center

}

.flex.bottom {

-webkit-box-align: end

}

Other incompatible features

In the old specification, when using proportional scalable layout, the content length of child elements was different, so we need to set a "width:0%" to the child elements to solve the problem.

Do not set the property "margin:auto" to item, it will cause the width of the element to stretch to 100% space in some Android machines.

In the old version of box item, attributes were required to be block-level structures, so many inline elements needed to be set up, such as display:block, to display properly.

Text-overflow: ellipsis; is not valid on display:flex element

Remember the hole above and avoid jumping into it.

This is the end of the article on "what are the knowledge points of Flexbox browser compatibility?" Thank you for reading! I believe you all have a certain understanding of "what are the knowledge points compatible with Flexbox browsers". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.