Detailed explanation of Flex layout in CSS3

1. Order attribute

The order attribute defines the order of items. The smaller the value, the higher the ranking. The default is 0.

2. flex-grow attribute

The flex-grow attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.

If all items have a flex-grow property of 1, they will equally divide the remaining space (if there is any). If one item's flex-grow property is 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.

3. flex-shrink attribute

The flex-shrink attribute defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will shrink.

If the flex-shrink property of all items is 1, when there is insufficient space, they will all be reduced proportionally. If the flex-shrink property of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space. Negative values ​​are not valid for this property.

4. flex-basis attribute

The flex-basis attribute defines the main axis space (main size) occupied by the item before allocating excess space. The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.

It can be set to the same value as the width or height attribute (such as 350px), then the item will occupy a fixed space.

5. Flex attribute

The flex attribute is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two properties are optional.

6. align-self attribute

The align-self attribute allows a single item to be aligned differently from other items and can override the align-items attribute. The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch. This attribute may take 6 values. Except for auto, the others are exactly the same as the align-items attribute.

The above is the detailed content of Detailed explanation of Flex layout in CSS3. For more information, please follow other related articles on the PHP Chinese website!