What does flex value 1 mean in css3

means: the "flex-grow" item's enlargement ratio value is 1, the "flex-shrink" item's reduction ratio value is 1, and the "flex-basis" item occupies a space of "0%"; flex is " The abbreviation of the three attribute values ​​​​of "flex-grow, flex-shrink, and flex-basis".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does the flex value of 1 in css3 mean?

flex is actually the abbreviation for the combination of these three attribute values: flex-grow, flex-shrink, and flex-basis. The equivalent conditions are as follows:

Syntax:

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Definition:

• flex-grow: Define the enlargement ratio of the item, the default is 0, that is, if there is remaining space, it will not be enlarged.

• flex-shrink: Defines the shrinkage ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink.

• flex-basis: Defines the space 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. If the value is 0, units must be added to avoid being considered scalable.

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

Detailed introduction:

Flex-grow

The flex-grow attribute defines the enlargement ratio of the item. The default is 0, that is, if there is remaining space, Nor Grow

If all items have a flex-grow property of 1, they will equally divide the remaining space (if 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.

Flex-shrink

The flex-shrink property defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will shrink. 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.

Flex-basis

The flex-basis property defines the main size of 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.

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(Learning video sharing: css video tutorial)

The above is the detailed content of What does flex value 1 mean in css3. For more information, please follow other related articles on the PHP Chinese website!