The old version of CSS flex is compatible with CSS flex.

The old version of CSS flex is compatible with CSS flex.
× Catalog [1] applicability [2] scaling project [3] scaling Flow Direction [4] scaling flow line feed [5] spindle alignment [6] scaling [7] display sequence [8] flex compatibility

The flex elastic box model has three versions: the old version, the mixed version, and the new version. To ensure that the flex elastic box model is consistent across mainstream browsers, you must master the different usage of these three versions. A deep understanding of the CSS elastic box model flex has introduced its basic usage in detail. This article mainly introduces the differences between the old version flex and its compatibility writing.

 

Applicability

The old flex version is the earliest flex version. The flex version is used in safari3.1-6 (mainly in the safari browser in windows), ios3.2-6.1, and android2.1-4.3. -Webkit-prefix must be added.

 

Scaling Project

The old version of flex requires that the scaling project must be a block element.

<Span> Project 1 </span> <span> Project 2 </span> <span> Project 3 </span> <span> Project 4 </span> </span>

Scaling stream direction

The reverse value in the direction of the scaling stream in the old version of flex only changes the order of scaling items and does not change the alignment mode. Therefore, we recommend that you use rtl ction: rtl to achieve reverse scaling of the stream.

Scaling stream line feed

Earlier versions of flex do not support line breaks for scaling streams. Therefore, do not use line breaks in other versions of flex.

 

Spindle alignment

In earlier versions of flex, the spindle alignment attribute does not contain the diffuse alignment attribute value. Therefore, do not use this attribute value in other versions of flex.

 

Scalability

The flex version of the old version has only one value for scalability, indicating the scale-up or scale-down ratio based on the scaling project size. The old version of-webkit-box-flex: 1 is equivalent to the new version of flex: auto; therefore, to achieve scaling that is not based on the size of the scaling project, you must explicitly set the width and width of the scaling project to 0.

[Note] This value supports decimal places, but cannot be a negative number.

Display order

The display order of the old flex version is a positive integer with 1 as the default value, while that of the new flex version is a natural number with 0 as the default value. Therefore, when setting the display sequence, skip 1 and start from 2.

 

Flex compatibility

The following are common compatibility codes of the flex module:

/* 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;}/* scaling stream direction */. the flex-direction_column {-webkit-box-orient: vertical;-ms-flex-ction: column;-webkit-flex-direction: column ;} /* spindle alignment */. justify-content_flex-center {-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center ;}. the 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-;} /* side axis alignment */. the align-items_flex-start {-webkit-box-align: start;-ms-flex-align: start;-webkit-align-items: flex-start; align-items: flex-start ;}. the 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_baseline {-webkit-box-align: baseline;-ms-flex-align: baseline;-webkit-align-items: baseline ;} /* scalability */. flex_auto {-webkit-box-flex: 1;-ms-flex: auto;-webkit-flex: auto ;}. flex_1 {width: 0;-webkit-box-flex: 1;-ms-flex: 1;-webkit-flex: 1; flex: 1 ;} /* display sequence */. 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 ;}