What is the principle of flex 1

1. flex property:

It is recommended to use this property in preference to writing three separate properties, because the browser will infer the relevant value.

2. flex-grow property:

The property defines the magnification of the item, the default is 0that if there is remaining space, it will not be enlarged.

.item {
  flex-grow: <number>; /* default 0 */
}

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

2. flex-shrink property:

flex-shrinkThe property defines the reduction ratio of the item, the default is 1, that is, if there is not enough space, the item will be shrunk. 

.item {
  flex-shrink: <number>; /* default 1 */
}

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

2. flex-basis property: ​​​​​​​

flex-basisThe property defines how much space the item occupies in the main axis before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. Its default value autois the original size of the item.

.item {
  flex-basis: <length> | auto; /* default auto */
}

It can be set to the same value as the widthor heightproperty (such as 350px), and the item will occupy a fixed space.

Leave a Comment

Your email address will not be published. Required fields are marked *