Flexbox, full name elastic box layout
Add display: flex to the element, the element becomes a flex container (flex container), and its direct child elements become flex child elements (flex item).
By default, flex child elements are arranged side by side on the same line in order from left to right.
A flex container fills the available width like a block element, but a flex child element does not necessarily fill the width of its flex container.
Flex child elements are of equal height, determined by their content.
Flexbox allows the use of margin: auto to fill the available space between flex child elements.
The flex property controls the size of the elastic child element in the direction of the main axis (here refers to the width of the element)
The flex property is shorthand for three different size properties: flex-grow, flex-shrink, and flex-basis
1. Use the flex-basis attribute [elastic child element attribute]
flex-basis defines the base value of the size of the element, that is, an initial "main size".
flex-basis can be set to any width value
2. Use the flex-grow attribute [elastic child element attribute]
The value of flex-grow (growth factor) is assigned to each flex child element, and the value of flex-grow is a non-negative integer. If the flex-grow value of a flex child element is 0, then its width will not exceed the value of flex-basis; if the growth factor of a flex child element is non-zero, then these elements will grow until all the remaining space is allocated Finished, which means that the elastic child element will fill the width of the container
The larger the value of flex-grow, the higher the "weight" of the element, and it will occupy a larger remaining width . A child with flex-grow: 2 grows twice as wide as a child with flex-grow: 1
3. Use the flex-shrink attribute [elastic child element attribute]
The flex-shrink value of each child element represents whether it should shrink to prevent overflow.
If a child element is flex-shrink: 0, it will not shrink;
If the value is greater than 0, it shrinks until it no longer overflows.
In proportion to the flex-shrink value, elements with larger values shrink more.
Holy Grail Layout:
4.align-self attribute [Elastic child element attribute]
This property controls the alignment of flex child elements along the secondary axis of the container
It has the same effect as the align-items property of the flex container, but it can set different alignments for the flex child elements individually . auto is the initial value, which will be based on the align-items value of the container. Other values override the container's setting. The align-self attribute supports the same keywords as align-items: flex-start, flex-end, center, stretch, and baseline.
5. order attribute [elastic child element attribute]
Use the order attribute to change the order in which child elements are arranged. It can also be specified as any positive or negative integer. If multiple flex child elements have the same value, they will appear in source order. use with caution
6. The flex-direction attribute controls the elastic direction [elastic container attribute]
The flex-direction property toggles the main axis direction.
flex-direction: row; control the initial value (row) to control the arrangement of child elements from left to right;
flex-direction: column; can control the arrangement of flexible child elements in the vertical direction (from top to bottom).
Flexbox also supports row-reverse to arrange elements from right to left, and column-reverse to arrange elements from bottom to top
A flex container takes up 100% of the available width, and its height is determined by its content. Even changing the direction of the main axis does not affect this essence.
7. Properties of the flex container
8. Properties of elastic child elements
9. flex-wrap attribute [elastic container attribute]
The flex-wrap property allows flexible child elements to be displayed on a new line or lines . It can be set to nowrap (initial value), wrap or wrap-reverse. After wrapping is enabled, the child elements no longer shrink according to the flex-shrink value, and any child elements that exceed the flex container will be displayed in a new line.
10.flex-flow attribute [elastic container attribute]
The flex-flow property is shorthand for flex-direction and flex-wrap. For example, flex-flow:column wrap specifies that flex child elements are arranged in a top-to-bottom fashion, wrapping to a new column if necessary.
11.justify-content, controls the alignment of child elements in the main axis direction [elastic container properties]
When the child element does not fill the container, the justify-content property controls the spacing of the child elements along the main axis . Its value includes several keywords: flex-start, flex-end, center, space-between, and space-around.
A value of space-between places the first flex child where the main axis begins, the last child where the main axis ends, and the remaining children spaced evenly between the two. The value space-around is similar, except that the same spacing is added to the front of the first child element and the back of the last child element.
12.align-items, control the alignment of sub-elements in the secondary axis direction [elastic container properties]
justify-content controls the alignment of sub-elements in the main axis direction, and align-items controls the alignment of sub-elements in the sub-axis direction. The initial value of align-items is stretch, which allows all child elements to fill the height of the container in the case of horizontal arrangement, and allows the child elements to fill the width of the container in the case of vertical arrangement, so it can achieve equal height columns