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

Source: Internet
Author: User

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.



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.



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 ;}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.