Introduction to Flex Syntax

Flex Box Layout (Flexible Box) is designed to provide a more efficient way to lay out, align, and allocate space between items in a container, even if their size is unknown or dynamically changing. The main idea is to allow the container to dynamically change the width and height of its elements based on the amount of available space.

The Flex CSS property sets how flex elements are dynamically stretched or shrunk based on the amount of space they have left in the Flex container. It is a simplified version of the flex-grow, Flex-shrink, and Flex-basis properties.

Its syntax formats are single – value, double – value and triple – value.

Single value syntax

The value must be one of the following:

  • The numericalnumberSo it is interpreted asflex: number 1 0
  • none,auto,initial

The double value of grammar

The first value must be number, which is interpreted as a flex-grow property, and the second value must be one of the following:

  • The numericalnumberWill be interpreted asflex-shrinkattribute
  • A person who can describeThe width of the, for example10em,30%,min-contentWill be interpreted asflex-basisattribute

Three values of grammar

The meanings of the three values:

  • The first onenumbersaidflex-grow
  • The secondnumbersaidflex-shrink
  • The third one describes the value representation of the widthflex-basis

flexDescription of each attribute

flex-grow

This property sets the scaling factor of the current Flex element in main-size. Main-size refers to the width and height (controlled by the Flex-direction property). The default value of this property is 0.

The larger the flex value, the more space it takes up. As shown in the figure below, the flex values of elements A, B, C, and F are set to 1, while the Flex values of elements D and E are set to 2, so the proportion of elements D and E is twice that of the others.

flex-shrink

The Flex-shrink attribute sets the shrink factor of a Flex element. If all the elements add up to a size larger than the Flex container, you need the flex-shrink attribute to control how to shrink. Its default value is 1.

As shown in the figure below, the size of the elements A, B, C, D, and E exceeds the size of the container itself. If the flex-shrink attribute is set to 1 for A, B, and C, and the value of the D and E attributes is set to 2, the size of the D and E elements will be smaller and the two elements will shrink more.

flex-basis

This property sets the initial size of a Flex element. It can be filled with the following values:

(1) width

flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;
Copy the code

Auto is the default for flex-basis

(2) Built-in keywords to adjust the size

flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
Copy the code

(3) Automatically adjust the size according to the content

flex-basis: content;
Copy the code

(4) Global value

flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
Copy the code

flexAttribute common values

flex: 0 auto

Flex: 0 auto = initial flex: 0 1 auto = initial It adjusts the size of an element based on its width or height attribute.

It causes flex elements to behave in a fixed-size style when there is some free space left; It allows it to shrink to a minimum when there is not enough room. The auto margin can be used to align elements according to the main axis.

flex: auto

Flex: Auto is the same as Flex: 1 1 Auto, which adjusts the size of elements based on their width or height attributes, but is flexible enough to allow them to absorb any extra space along the main axis.

flex: none

Flex: None equals flex: 0 0 auto. It adjusts the size of elements according to width and height, but is completely inflexible.

reference

  • A Complete Guide to Flexbox
  • flex
  • flex

❤ ️ ❤ ️ ❤ ️

Finally, if this article is helpful to you, please do me three small favors:

1. Click “like 👍🏻” to express your approval of this article ❤️❤️ 🏻

2. Pay attention to the public number “I am front-end mew”, regularly push selected articles for you, take a look on the way to and from work, useful knowledge unknowingly increased 😊😊😊

3. Recommend the public account “I am front-end meow” to your friends, and progress together 🌞🌞🌞