Introduction to Flex Layouts

Flex Layout

The traditional layout method is based on the box model, and is realized by the display + position + float method.
Added a new layout scheme to the CSS3-flex layout . A. Flex layout

Flex is the abbreviation for flexible Box ( elastic layout ).
Place the element as a flex layout. Just add the Display:flex attribute to the element that needs to use flex layout.
1. Block element

. box{
  Display:flex;
}

Inline elements Support Flex layout

. box{
  Display:inline-flex;
}

After you use flex layout, the float, clear, and Vertical-align properties in its child elements are invalidated 2. Basic Concepts

1. Element Description: The parent element that uses flex layout is called the Flex container (Flex container). Each child element is called a Flex project (Flex Item).
2. Main axis: Horizontal spindle (x-axis). The starting position of the spindle (the intersection with the border) is called main start, and the end position is called main ending;
3. Cross axis vertical cross axis (Y axis): The start position of the cross axis is called Cross start, and the end position is called the cross ending.
4. Main spindle space occupied by the flex item in the Size:flex container, that is, width.
5. The cross space occupied by the flex item in the cross Size:flex container, that is, height 3. Related Properties Description 3.1. Properties in a container: that is, the properties that a container with flex layout can use. 3.1.1 Flex-direction: Determines the direction in which the Flex item (item) is arranged;
row: Horizontal, aligned from left to right.
row-reverse: Horizontal, aligned from right to left.
column: Vertical, arranged from top to bottom.
column-reverse: Vertical direction, arranged from bottom up.

    . box{
      Flex-direction:row | row-reverse | column | column-reverse;
    }

3.1.2 Flex-wrap: Defines the line wrapping for flex items (Flex item);
nowrap(default): No Line Wrap Warp: line wrap, new line below first line. Wrap-reverse: line wrap, new line on first line
Side. The first line becomes the second row.

. box{
  Flex-wrap:nowrap | wrap | wrap-reverse;
}

3.1.3 Flex-flow:flex-direction and Flex-wrap, the default value is: Row nowrap.

. box {
  flex-flow: <flex-direction> | | <flex-wrap>;
}

3.1.4 Justify-content: Defines the alignment of the Flex item (FLEX-ITEM) on the spindle (x-axis or horizontally). The value is:
Flex-start(default): left-aligned, if the spindle direction from right to left (Flex-direction:row-reverse), the right alignment Flex-end: Right-aligned, left-aligned if the spindle direction is from right to left (Flex-direction:row-reverse) Center: Center Space-between: Justified, the spacing between items is equal. Space-around: Each item has an equal spacing on both sides. Therefore, the interval between items is one times greater than the spacing between items and borders.

. box {
  Justify-content:flex-start | flex-end | center | space-between | space-around;
}

3.1.5 Align-items: Defines the alignment of the Flex item (Flex-item) in the cross axis (y-axis or vertical), with the following values:
Flex-start: The starting point of the cross axis is aligned. Flex-end: The end of the cross axis is aligned. Center: The midpoint of the cross axis is aligned. Baseline: The baseline alignment of the first line of text in the project. **stretch (default): If the item is not set to a height or set to auto, it will fill the height of the entire container

. box {
  Align-items:flex-start | flex-end | center | baseline | stretch;
}

Note : If the cross axis is arranged from top to bottom, the cross axis starts at the top and vice versa.
* 3.1.6 Align-content: Alignment of multiple axes. If the project has only one axis, the property does not work, that is, multiple rows of data are displayed in the container. The desirable values are:
* Flex-start: Aligns with the starting point of the cross axis.
* flex-end: Aligns with the end of the cross axis.
* Center: Aligns with the midpoint of the cross axis.
* Space-between: aligned with the intersection axis, the spacing between axes evenly distributed.
* space-around: Each axis on both sides of the interval is equal. Therefore, the spacing between axes is one-fold greater than that between axes and borders.
* stretch(default): The axis occupies the entire cross axis. 3.2. Properties of the project 3.2.1 Order Property: Defines the ordering of flex items (Flex Item). The smaller the number, the higher the arrangement, and the default is 0.

. Item {Order
  : <integer>;
}

3.2.2 Flex-grow Property: Defines the magnification of the Flex item (Flex item) By default of 0, that is, if there is space left, it does not enlarge

. Item {
  Flex-grow: <number>;/* Default 0 */
}

FLEX-GRIOW is calculated by: The amount of expansion per child element is.
 W = (sum of child element Flex-grow value/all child element Flex-grow) * Remaining value
//So child element width =  child element flex-basis value + W

If all items have a Flex-grow property of 1, they will equal the remaining space (if any). If an item has a Flex-grow property of 2 and the other items are 1, the former occupies a multiple of the remaining space than the other items. 3.2.3 Flex-shrink Property: Defines the narrowing ratio of the flex item (Flex item), which defaults to 1, that is, if there is not enough space, the project shrinks

. Item {
  Flex-shrink: <number>;/* Default 1 */
}

Calculation of the reduced amount:
1. The weighted value = Son1 + son2 + ... + sonn;
then the calculated formula after compression is
2. Width w = (child element flex-basis value * (flex-shrink)/weighted value) * Overflow value (insufficient amount of space)
3. Width of each child element = flex-basis value of child element-W

If all items have a Flex-shrink property of 1, when the space is low, the proportions will be reduced. If an item has a Flex-shrink property of 0 and the other items are 1, the former does not shrink when there is not enough space.
Negative values are not valid for this property.
* 3.2.4 Flex-basis Property: Defines the main spindle space (main size) that the project occupies before allocating extra space. Depending on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the item

. Item {
  flex-basis: <length> | auto;/* Default Auto/
}

It can be set to the same value as the width or height property (such as 350px), the item will occupy a fixed space.
* 3.2.5 Flex properties: Is Flex-grow, Flex-shrink and flex-basis, the default value is 0 1 auto. The latter two attributes are optional

. item {
  Flex:none | [< ' Flex-grow ' > < ' flex-shrink '] | | | < ' flex-basis ' >]
}

This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).
It is recommended that you use this attribute first rather than write three separate attributes separately, because the browser calculates the correlation value. 3.2.6 Align-self Property: Allows a single item to be aligned differently than other items, overwriting the Align-items property. The default value is auto, which indicates the Align-items property of the inherited parent element, and is equivalent to stretch if there is no parent element

. item {
  Align-self:auto | flex-start | flex-end | center | baseline | stretch;
}

This property may take 6 values, except auto, which is exactly the same as the Align-items property. Reference:

Flex Layout Tutorial: Grammar Chapter
A Complete Guide to Flexbox
Flex-grow, Flex-shrink Property calculation method