How to use the flex-basis attribute in css

This article mainly introduces how to use the flex-basis attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!

1. Flex-basis defines the default size of the element before allocating the remaining space.

2. The default value is auto, which is automatic. If width is set, the occupied space is width. If not set, follow the content width. If you set both width and flex-basis, width is ignored in terms of rendering performance.

When there is insufficient space left, the actual width of the flex subitem is usually not the set size of the flex-basis, because when the flex layout runs out of space, it shrinks by default.

Example

C {flex-basis:50px;} .c1 {flex-grow:1;background-color:#409EFF;} .c2 {flex-grow:2;background-color:#EEEEEE;} .c3 {flex-grow:1;background-color:#FAEBD7;} above is all the content of this article entitled "how to use the flex-basis attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!