CSS3 Flex Layout (Project)

First, order attribute

The Order property defines the order in which the items are arranged. The smaller the number, the higher the alignment, and the default is 0.

Second, Flex-grow properties

The Flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not zoomed in.

If all items have a Flex-grow property of 1, they will divide the remaining space (if any). If the Flex-grow property of one project is 2 and the other items are 1, the former occupies more than the remaining space.

Third, Flex-shrink properties

The Flex-shrink property defines the scaling of the project, which defaults to 1, which means that if there is not enough space, the project shrinks.

If all items have a Flex-shrink property of 1, they will be scaled down when there is not enough space. If the Flex-shrink property of an item is 0 and the other items are 1, the former does not shrink when there is not enough space. A negative value is not valid for this property.

Iv.. Flex-basis Properties

The Flex-basis property defines the spindle space (main size) that the item occupies before allocating the extra space. Based on this property, the browser calculates whether the spindle has extra space. 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 property (such as 350px), then the item will occupy a fixed space.

V. Flex Properties

Flex properties are shorthand for Flex-grow, Flex-shrink, and flex-basis, and the default value is 0 1 auto. The latter two properties are optional.

Vi.. Align-self Properties

The Align-self property allows a single item to be aligned differently from other items, overriding the Align-items property. The default value is auto, which represents the Align-items property that inherits the parent element, and, if there is no parent element, is equivalent to stretch. This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

Flex Layout Tutorial: Syntax Chapter

CSS3 Flex Layout (Project)

CSS3 Flex Layout (Project)