CSS Legacy Flex and compatibility

xTable of Contents [1] applicable range [2] Telescopic project [3] telescopic flow direction [4] Telescopic flow wrap [5] spindle alignment [6] flexibility [7] Display order [8]flex compatibility front

Flex box models are available in 3 versions: older, mixed, and new versions. If you want to ensure that the Flex box model is consistent across all major browsers, you must master the different uses of these 3 versions. In-depth understanding of CSS Elastic box model Flex has described its basic usage in detail, this article mainly introduces the differences and compatibility of old versions of Flex

Scope of application

Older flex refers to the earliest flex version, which is used in safari3.1-6 (mainly in the Safari browser under Windows systems), ios3.2-6.1, and android2.1-4.3. And all need to add-webkit-prefixes

Telescopic Project

Older flex requires that the scaling project must be a b　　lock Element

<span>    <span>Project One</span>    <span>Item Two</span>    <span>Item Three</span>    <span>Item Four</span></span>

Telescopic Flow Direction

The reverse value in the telescopic flow direction of the old flex version only changes the order of the scaling items and does not change its alignment. Therefore, we recommend using DIRECTION:RTL to achieve the reverse effect of the telescopic stream

Flex-Flow Line Wrapping

Flex-line wrapping is not supported in older versions, so try not to use line wrapping in other versions of Flex

Spindle Alignment

There is no diffusion alignment attribute value in the spindle alignment properties of older flex, so try not to use this property value in other versions of Flex

Elasticity of

The scalability of older flex has only one value, which represents the expansion or contraction ratio based on the size of the scaling item itself, the old version of the-webkit-box-flex:1; the equivalent of the new version of Flex:auto; So in order to achieve the scaling without scaling the size of the size of the project itself needs to explicitly set the width of the scaling project to 0

　　[note] This value supports decimals, but cannot be negative

Display order

The display order of the older flex is a positive integer with the default value of 1, and the new version of Flex is the natural number with the default value of 0. So when setting the display order, skip 1, set from 2

Flex-compatible

The following are commonly used compatible codes for Flex modules

/*Display*/. Display_flex{Display:-webkit-box;Display:-ms-flexbox;Display:-webkit-flex;Display:Flex;}. Display_flex > *{Display:Block;}. Display_inline-flex{Display:-webkit-inline-box;Display:-ms-inline-flexbox;Display:-webkit-inline-flex;Display:Inline-flex; }. Display_inline-flex > *{Display:Block;}/*Telescopic Flow Direction*/. Flex-direction_column{-webkit-box-orient:Vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;}/*Spindle Alignment*/. Justify-content_flex-center{-webkit-box-pack:Center;-ms-flex-pack:Center;-webkit-justify-content:Center;justify-content:Center;}. Justify-content_flex-end{-webkit-box-pack:End;-ms-flex-pack:End;-webkit-justify-content:Flex-end;justify-content:Flex-end;}. Justify-content_flex-justify{-webkit-box-pack:Justify;-ms-flex-pack:Justify;-webkit-justify-content:Space-between;justify-content:Space-between;}/*Side Axis Alignment*/. Align-items_flex-start{-webkit-box-align:Start;-ms-flex-align:Start;-webkit-align-items:Flex-start;Align-items:Flex-start;}. Align-items_flex-end{-webkit-box-align:End;-ms-flex-align:End;-webkit-align-items:Flex-end;Align-items:Flex-end;}. Align-items_center{-webkit-box-align:Center;-ms-flex-align:Center;-webkit-align-items:Center;Align-items:Center;}. Align-items_baseline{-webkit-box-align:Baseline;-ms-flex-align:Baseline;-webkit-align-items:Baseline;Align-items:Baseline;}/*Elasticity of*/. Flex_auto{-webkit-box-flex:1;-ms-flex:Auto;-webkit-flex:Auto;Flex:Auto;}. Flex_1{width:0;-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1;Flex:1; }/*Display Order*/. order_2{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;Order:2;}. Order_3{-webkit-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;Order:3;}

CSS Legacy Flex and compatibility