flex from summary to understanding

flex is a layout method that has been around since CSS3. It is mainly composed of parent container and child items. The parent container has six properties, namely:

• Control spindle axis: flex-direction

  • row: horizontal axis (default)
  • row-reverse: the reversed horizontal axis
  • column: vertical axis
  • column-reverse: the vertical axis that is reversed

• Newline: flex-wrap

  • nowrap: do not wrap (default)
  • wrap: wrap
  • wrap-reverse: wrap in reverse
• Spindle arrangement: justify-content
• Cross axis arrangement: align-items

• Axial and newline combined settings: flex-flow (flow direction)

  • Generally, this property is rarely used, that is, to change the layout order of the sub-items, forward and backward

Child items also have six properties, namely:

• Elastic expansion: flex-grow

  • Specify the allocation rule when the remaining space of the container is excess
  • The default value is 0, and excess space is not allocated

• Elastic shrinkage: flex-shrink

  • Specify the allocation rule when the remaining space of the container is insufficient
  • The default value is 1, if there is insufficient space to allocate; if it is 0, it means no allocation

• Base size: flex-basis

  • Specifies the initial size (base size) of the flex element in the main axis direction
  • The default value is auto, which is the size of the item itself

• Abbreviation: flex

  • Abbreviation for flex-grow, flex-shrink, flex-basis
  • Default is 0 1 auto
• Spindle order: order
• Cross Axis Alignment: align-self

In general, the parent container controls the overall layout, and the child controls the child layout

In interviews, how broad is often not asked, the most common flex interview questions are:

• flex: 0 1 auto How to understand?
• flex: 1 What does it represent and what are the application scenarios
• flex: 0 , flex: 1 , flex: none , flex: auto , what does it mean, and what applications used in the scene?

To answer these questions, we must understand the flex property in children

flex syntax

 flex: none | auto | [< 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' > ];

The single pipe character | means exclusive. That is, the attribute values before and after this symbol are supported and cannot appear at the same time. Therefore, the following syntaxes are supported:

 flex: auto;
flex: none;

flex: [< 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' >];

Square brackets [...] indicate ranges. Supported properties are in this range

? means 0 or 1, that is, flex-shrink attributes are optional. Because the flex property value can also be 2 values

 flex: auto;
flex: none;
/* 2个值 */
flex: 1 100px;
/* 3个值 */
flex: 1 1 100px;

Double pipe || , which means "or". Indicates that the front and rear can be used independently, that is, flex: flex-grow flex-shrink? and flex-basis are both legal. So we have 2 more legal ways to write:

 /* 1个值，flex-basis */
flex: 100px;
/* 2个值，flex-grow 和 flex-shrink */
flex: 1 1;

convert to text

Single-value syntax:

If the property value of flex has only one value, there are three cases

• A unitless number, such as flex: 1 means flex-shrink: 1 , the remaining space is extended. At this point, the values of flex-shrink and flex-basis are 1 and 0%, respectively. Note that the value of flex-basis here is 0%, not the default value auto

  • Just change the value of flex: 数字 , flex-basis to 0
• A valid width value, expressed in the form of a length value, for example flex: 100px means flex-basis: 100px , and the base size is 100px. At this point, the values of flex-grow and flex-shrink are both 1. Note that the value of flex-grow is 1, not the default value of 0.
• Keyword none , auto or initial

Double value syntax:

If the property value of flex has two values, the first value must be flex-grow , and the second value represents different CSS properties according to different types of values. The specific rules are as follows:

• Numerical value: for example flex: 1 2 , then this 2 means flex-shrink , and the value of flex-basis is 0%, not the default value auto
• Length value, for example flex: 1 100px , then this 100px value flex-basis , at this time flex-shrink default value

Three-valued syntax:

If the property value of flex has 3 values, the length value represents flex-basis , and the other 2 values represent flex-grow and flex-shrink respectively. The following two lines of CSS statement are both valid syntax and have the same meaning:

 flex: 1 2 50%;
flex: 50% 1 2;

flex property value scene application

flex defaults to 0 1 auto. In addition to this, there are various other values

• flex: none, equivalent to flex: 0 0 auto;
• flex: auto, equivalent to flex: 1 1 auto;
• flex: 1, equivalent to flex: 1 1 0%;
• flex: 0, equivalent to flex 0 1 0%;

Zhang Xinxu has drawn a picture:

single value syntax	Equivalent to	Remark
flex: initial	flex: 0 1 auto	initial value, common
flex: 0	flex: 0 1 0%	Fewer applicable scenarios
flex: none	flex: 0 0 auto	recommend
flex: 1	flex: 1 1 0%	recommend
flex: auto	flex: 1 1 auto	Fewer applicable scenarios

Default flex: initial

It is equivalent to flex:0 1 auto , which means that the size of the flex container will not grow when there is remaining space ( flex-grow : 0), and the size of the flex container will shrink and become smaller when the size of the flex container is insufficient ( flex-shrink :1), size is adaptive to content ( flex-basis :auto)

My understanding: When the total length of the sub-item is less than the total container, it will not be filled ( flex-grow :0), but exists according to the actual width and height ( flex-basis :auto); When the total length of the item is greater than the total container, the child item will shrink relative to the relative ratio ( flex-shrink :1)

Applicable scene

Applicable to scenarios where the total length of sub-items is less than the total container, such as the typography layout of widgets such as buttons, titles, and small icons

Difference between flex: 0 and flex: none

flex: 0 equivalent to setting flex: 0 1 0% , flex:none equivalent to flex: 0 0 auto

flex: 0 , and because it is a numeric value, it represents flex-grow , I found only subsequent set flex: 数字 , then flex-basis It will automatically become 0%, so the final size of the element that sets flex:0 is expressed as the minimum content width;

Notice:

flex: 1 === flex: 1 1 0%

flex: 0 === flex: 0 1 0%

After flex is set to a number, although flex-basis is the minimum width, but the former flex-grow has a value, you can fill the container with sub-items, the latter is 0, do not expand

flex: none , neither numeric nor length, none keyword. flex: 0 0 auto Indicates that the element size will not shrink or expand, plus flex-basis: auto Indicates that the fixed size is determined by the content, because the element is not elastic, because the element inside the element will not wrap , the final size is usually expressed as the maximum content width

Applicable to scenarios where flex: 0 is used

No matter how the content of the text is set, the width of the content on the left is the width of the image

Suitable for scenarios using flex: none

When the width of the flex sub-item is the width of the content, and the content will never wrap, it is suitable to use flex:none , such as the following scenarios, pictures and buttons are of fixed length, and the content is flexible

The difference and applicable scenarios between flex: 1 and flex: auto

flex:1 equivalent to setting flex: 1 1 0% , flex: auto equivalent to flex: 1 1 auto

It can be seen that both flex-grow and flex-shrink are the same, which means that they can elastically expand and contract elastically, the difference is flex: 1中flex-basis is 0, that is, the width is 0. flex:auto in flex-basis is auto, that is, the width is its own width

The performance looks like:

It needs to be explained here, because I didn't understand it at first, the formula is:

width of each child = (total width---width of flex-basis ) / 3 (for this example)

Because the width of flex:1 of flex-basis is 0, so each sub-item can be divided equally when its total width expands or contracts.

Suitable for scenarios with flex: 1

When you want the element to make full use of the remaining space without encroaching on the width of other elements, it is suitable for flex:1 , such as all equal lists

The previous example of flex: none , also set the text part flex: 1 can also achieve a similar effect

Suitable for flex: auto scenarios

When you want elements to make full use of the remaining space, but their respective sizes are allocated according to their respective contents, it is suitable for flex: auto

For example, the number of navigation is not fixed, and the navigation effect that the number of each navigation text page is not fixed is suitable for application flex: auto

Looking back at the interview questions I said earlier

1. flex: 0 1 auto How to understand?
2. flex: 1 What does it represent and what are the application scenarios
3. flex: 0 , flex: 1 , flex: none , flex: auto , what does it mean, and what applications used in the scene?

first question answer

The default value of flex is 0 1 auto, which means that the container does not expand when there is excess space, and shrinks when it is insufficient. The width of the sub-item is displayed according to its own width.

second question answer

If the value of flex is a value and a number, it means flex-grow:1 , when it is a number, flex-basis will automatically become 0, so it is specifically expressed as flex:1 1 0% , indicating that the container expands when there is excess space, and shrinks when it is insufficient, and the width of the child item is 0. It is generally suitable for making full use of the remaining space without encroaching on the width of other elements, such as equal division layout

Answer to the third question

flex:0 , which means flex: 0 1 0% , which means that the container does not expand when there is excess space, and shrinks when it is insufficient. The width of the child item is 0, which is applicable to the parent element of the replacement element.

flex:1 , see the second answer

flex: none , which means flex: 0 0 auto , which means that the container does not expand when there is excess space, and does not shrink when it is insufficient. The width of the sub-item is its own width, which is suitable for content that does not wrap or on fewer widget elements

flex: auto , which means flex: 1 1 auto , which means that the container expands when there is excess space, and shrinks when it is insufficient. For example, the length of the navigation number text is not fixed)

flex:initial , which means flex: 0 1 auto , which means that the container will not expand when there is excess space, and shrink when it is insufficient. The width of the sub-item is its own width, which is suitable for the distribution layout of widget elements. Or the layout of a content that changes dynamically

References

• When should flex:0 flex:1 flex:none flex:auto be used?
• In-depth understanding of CSS flex properties
• MDN Web Docs flex
• Get flex layout done once and for all

This article participated in the SegmentFault Sifu essay "How to "anti-kill" the interviewer?" , you are welcome to join.