Of course, I have also seen that flexbox layout attributes will add all the new and old prefix, so easy ah who idle all day long to study the compatibility of several attributes, but the situation of the front end development so fast may have more awesome style

But if you want to use this layout on the mobile terminal to understand this attribute, I still want to explore it one by one. Here, I first say the latest version of each browser on the PC terminal. The latest version of Internet Explorer is IE11, FF is FF41.0, Chrome is Chrome 45.0, Safira is 8.0.3, The latest version of Opera is 31 but these latest versions don’t mean anything to us it’s just a standard and nobody has the latest browser on their computer, all right

Display :box/flexbox/ Flex First look at this definition elastic layout box attached with compatibility diagram

It’s a little more intuitive to make compatible with this property as follows

display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Copy the code

Define child arrangement

There are two new ways to write flex-direction and the old way to write box-orient+box-direction,

Compatibility with flex-direction

The old way of writing box-orient is the same as box-direction

As you can see, directions are still not supported in IE11. Other browsers use prefixes, so this compatibility can be written when defining directions

-webkit-box-orient:vertical; -webkit-box-direction:normal; -moz-box-orient:vertical; -moz-box-direction:normal; flex-direction:column; -webkit-flex-direction:column; Flex-direction :row/row-reverse can be achieved by copying code with box-orient:horizontal + box-direction:normal/reverse

Flex-direction :column/ Column-reverse can be achieved with box-orient:vertical + box-direction:normal/reverse

Defines line breaks for child elements

The new flex-wrap is compatible with the following

Box-lines :single/multiple Default single compatibility is as follows

This property is still not supported in Ie11, firefox does not support this property, but it is supported in version 25, still use Flex + -moz, it is more intuitive, so you can define child element newlines as follows

– its – flex – wrap: wrap; -webkit-box-lines:multiple; -moz-flex-wrap:wrap; flex-wrap:wrap;

flex-flow

This is the combination of the two properties above

The flex – flow compatible

In order to be compatible with older browsers, we need to use box-orient+box-lines

-webkit-flex-flow:row wrap; -webkit-box-orient:horizontal; -webkit-box-lines:multiple; – moz – flex – flow: row wrap; box-orient:horizontal; box-lines:multiple; flex-flow:row wrap; Copy code horizontally arranged layout

Compatibility with the new version of justify-content

Compatibility with older versions of Box-pack

Therefore, compatibility can be written as:

-webkit-justify-content:center; justify-content:center; -moz-box-pack:center; -webkit–moz-box-pack:center; box-pack:center; Vertical layout

Compatibility of new version align-items

Compatibility with older versions of Box-align

Therefore, compatibility can be written as:

align-items:center; -webkit-align-items:center; box-align:center; -moz-box-align:center; -webkit-box-align:center; Flexible box layout compatible

New version Flex: NUM compatible

Older versions of Box-Flex are compatible

So compatibility can be written as

box-flex:num; -webkit-box-flex:num; -moz-box-flex:num; flex:num; -webkit-flex:num; Element order

New version order:num compatible

Old version border-order:num compatible

So compatibility can be written as

box-order:num; -webkit-box-order:num; -moz-box-order:num; order:num; -webkit-order:num;