All the ways to write flex properties and their meanings

/* Default initial value, equivalent to flex:0 1 auto; * /
flex: initial;

/* equivalent to flex:0 0 auto; * /
/* Neither zoom in nor zoom out */
flex: none;

/* equivalent to flex:1 1 auto; * /
/* If you have enough space, zoom out */
flex: auto;

/* Equivalent to flex:1 1 0%; * /
/* More space will enlarge, less space will shrink */
flex: 1;

/* Equivalent to flex:1 1 100px; * /
flex: 100px;

/* Equivalent to flex:1 1 100px; * /
flex: 1 100px;

/* Equivalent to flex:1 0 0%; * /
flex: 1 0;

flex: 1 0 100px;
Copy the code

Flex :0 vs. Flex: None

Flex :0 = 0 1 0%; Flex :none equals flex:0 0 auto;

Flex :1 vs. Flex: Auto

Flex :1 = 1; Flex :1 1 auto; flex:1; When the remaining space is insufficient, it will sacrifice its own space first, and will not compress the space of other elements first. flex:auto; Will expand their space first

Flex :1 Application scenario

  • This can be used when you want an element to make full use of the remaining space without encroaching on the space of other elements.
  • Width layout

Flex: Auto Application scenario

  • Content is spread out in proportion to width, such as a horizontal menu bar, but if the content is not wide enough, it is displayed in proportion to width

The flex – meaning the basis

Flex-basis is used to set how much space children occupy on the main axis, for example, the default main axis represents the width of the element. The priorities are:

max-width||min-width > flex-basis > width > content-width

Flex-basis sets 0%, Auto, 100px. What’s the difference?

Minimum content width (Chinese is the width of a Chinese character, English words cannot be broken)

  • 0% : display according to the minimum content width (one Chinese word, independent English word)
  • Auto: Displays the maximum content width. If the element loses elasticity, it does not wrap by default
  • 100px: If it loses elasticity and is not set to max-width min-width, display it at 100px. In other cases, refer to priority

Flex-grow Allocation rules for excess space

If there is extra space, the extra space will be allocated according to the flex-grow ratio set by the subitem. For example, by default, A, B, and C occupy 200px width and 100px spare space. Because the flex-grow value of A is 0, no space will be allocated. Flex – turns up to 2 B, because C flex – turns up to 1, so the allocated space for 2 B/(1 + 2) x 100 = 66.66 px, C distribution of surplus space is 1 / (1 + 2) x 100 = 33.33 px. Final size A=50+0=50px; B = 100 + 66.66 = 166.66 px; C = 50 + 33.33 px = 83.33 px;

Flex-shrink The percentage of a subitem that shrinks when space is insufficient

When the space is insufficient, the subitems will shrink according to the weight. If the maximum and minimum widths are set, the widths will be locked. For example, A, B, and C occupy A width of 200px by default and need to shrink by 100px. Since the flex-shrink value of A is 0, there is no need to shrink for the time being. If the flex-shrink value of B is 2, the shrink width of B is 1002 / (500 + 1002 + 501) 100 = 80 px; C has a contraction width of 501 / (500 + 1002 +50*1) = 20px; Final size A=50-0 = 50px; B = = 20 px; 100-80 C = 50-20 = 30 px;

tip

  • Use an elastic layout without using width
  • The Flex shorthand is recommended and is optimized for common scenarios

reference

  • Have an in-depth understanding of flex-grow, flex-shrink, and flex-basis layouts
  • Flex :0 flex:1 flex: None Flex: Auto When should it be used?