FLEX-CSS3 Elastic Box Model

Study Blog URL: http://caibaojian.com/flexbox-guide.html

Set on the parent element:

1. Display:flex

2. Flex-direction Set Spindle direction: Row is arranged from left to right (default value) | Row-reverse from right to left | Column from top down | Column-reverse from bottom to top

3. Justify-content Sets or retrieves the alignment of the elastic box elements in the spindle direction. This property assists in allocating extra space when all child elements on a row in the elastic box cannot be scaled or have reached their maximum value. When an element overflows a row, this property is also controlled on the alignment.

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around

Flex-start: The Elastic box element aligns to the starting position of the line. The boundary of the primary start position of the first child element of the row is aligned with the boundary of the primary start position of the row, and all subsequent telescopic box items are aligned with the previous item.
Flex-end: Aligns to the line end position. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the main end position of the row, and all subsequent telescopic box items are aligned with the previous item.
Center: Aligns the middle position of the row. The child elements of the row are aligned to each other and centered in the row, while the first element is equal to the margin of the primary start position of the line with the margin of the last element and the primary end of the row (if the remaining space is negative, an overflow of equal lengths is maintained).
Space-between: The elastic box elements are evenly distributed in the row. If the left-most remaining space is a negative number, or if the row has only one child element, the value is equivalent to ' Flex-start '. In other cases, the boundary of the first element is aligned with the boundary of the primary start position of the row, while the last element's boundary is aligned with the margin of the row's main end position, while the remaining telescopic box items are evenly distributed and ensure that the white space between 22 is equal.
Space-around: The elastic box elements are evenly distributed across rows, leaving half of the space between child elements and child elements. This value is equivalent to ' center ' if the left-most remaining space is a negative number, or if the line has only one telescopic box item. In other cases, the telescopic box items are evenly distributed and ensure that the space between 22 is equal, while the space before the first element and the last element are half as many other white space.

4. Align-items Sets or retrieves the alignment of the elastic box element in the direction of the side axis (longitudinal axis).

Align-items:flex-start | Flex-end | Center | Baseline | Stretch

Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.
Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.
Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).
Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.
Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

5. Align-content set or retrieve the alignment of the Flex box stacking stretch line. Controls multiple lines, and the value of align-items affects it only when the value is stretch.

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch

Flex-start: Each row is stacked to the starting position of the elastic box container. The start boundary of the side axis of the first row in the Elastic box container is close to the start boundary of the side axis of the elastic box container, and each row immediately follows the front row.
Flex-end: The rows are stacked to the end position of the elastic box container. The end boundary of the side axis of the last line in the Elastic box container is close to the end of the side axis of the elastic box container, and each row immediately follows the previous row.
Center: Each row is stacked to the middle of the elastic box container. Each row 22 is close to live at the same time in the Elastic Box Container center alignment, keep the elastic box container side axis start content boundary and the distance between the first row and the side of the container end of the content boundary and the last row of the same distance. (If the remaining space is negative, the rows are equal distances that overflow in two directions.) ）
Space-between: The rows are evenly distributed in the elastic box container. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' Flex-start '. In other cases, the start boundary of the side axis of the first row is close to the boundary of the start of the side axis of the elastic box container, the end boundary of the side axis of the last line is close to the end boundary of the side axis of the elastic box container, and the remaining rows are arranged in a flexible box window to maintain equal space between 22.
Space-around: The rows are evenly distributed in the elastic box container, with half of the space between the child elements and the child elements preserved on both ends. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' center '. In other cases, the rows are arranged in a flexible box container in a certain way to maintain equal space between 22, while the space behind the first line and the last line is half the rest of the space.
Stretch: Each row will stretch to occupy the remaining space. If the remaining space is a negative number, the value is equivalent to ' Flex-start '. In other cases, the remaining space is divided by all rows to enlarge their side axis dimensions.

6. Flex-wrap Wrap:nowrap (default) | Wrap Wrap | Wrap-reverse Reverse Line Wrapping

7. Flex-flow:[flex-direction] [Flex-wrap]

Write on the child element:

1. Order display sequence. Use integer values to define the order in which the values are small. Can be a negative value.

2. Flex Scalability: Auto | none | Numerical

3. Align-self Sets or retrieves the alignment of the Flex box "child element itself" in the side axis direction.

Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

Auto: If the value of ' align-self ' is ' auto ', it evaluates to the ' Align-items ' value of the element's parent element, and if it does not have a parent element, the value is ' stretch '.
Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.
Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.
Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).
Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.
Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.

4. Margin:auto

Sets the Display:flex on the parent element and sets Margin:auto on the child element, which is centered vertically across the parent element.

FLEX-CSS3 Elastic Box Model