Flexbox and flexbox Layout

Flexbox and flexbox Layout

Flexbox Model

• Main axis | main dimension: the user agent configures a scaling project along the main axis of a scaling container. The main axis is an extension of the main axis.

• Spindle start point and spindle end point (main-start | main-end): the configuration of the scaling project starts from the start side of the main axis of the container and ends at the end side of the main axis.

• Spindle length and spindle length attributes (main size | main size property): The width or height of a scaling project in the spindle direction is the spindle length of the project, the spindle Length attribute of a scaling project is the width or height attribute, which is determined by the direction of the spindle.

• Cross axis | cross dimension: the axis perpendicular to the spindle is called the side axis, which is an extension of the side axis.

• Side axis start point and side axis end point (cross-start | cross-end): Fill the configuration of the scaling line of the project from the start side of the side axis of the container, end to the end side of the side axis.

• Side axis length and side axis length attribute (cross size | cross size property): The width or height of the scaling project in the side axis direction is the side axis length of the project, the side axis length attribute of a scaling project is "width" or "height", which is determined by the direction of the side axis.

 

 

Flexbox attributes

Flex-direction: Attributes determine the direction of the spindle (that is, the direction of the project ).

• Row: (default) the spindle is in the horizontal direction and the start point is at the left end.
• Row-reverse: the spindle is in the horizontal direction and the start point is in the right end.
• Column: the spindle is vertical, and the start point is in the upper edge.
• Column-reverse: the spindle is vertical and the start point is in the bottom edge.

 

 

Flex-wrap: by default, all items are placed on a line (also called an axis. The Flex-wrap attribute definition defines how to wrap a line if an axis does not fit.

• Nowrap: (default) do not wrap
• Wrap: line feed. The first line is above.
• Wrap-reverse: line feed. The first line is below.

 

Flex-flow: the attribute is short for the flex-ction attribute and the flex-wrap attribute. The default value is row nowrap.

 

Justify-content: defines the alignment of the project on the spindle.

• Flex-start (default): left aligned.
• Flex-end: right alignment.
• Center: Center.
• Space-between: the two ends are aligned, and the interval between projects is equal.
• Space-around: Each project has an equal interval between two sides. Therefore, the interval between projects is twice the interval between projects and borders.

 

Display value:

Flex: elastic containers are block-level.

Inline-flex; elastic containers are row-level elements.

The Align-content attribute defines how to arrange each row when the vertical axis of an Elastic container has additional space. It does not work when the elastic container has only one row

Default Value: stretch;

Flex-start: fill all rows from the starting point of the vertical axis. The start and end of the vertical axis of the first line are aligned with the start edge of the vertical axis of the container. Each row follows the previous line.

Flex-end: fill all rows from the end of the vertical axis. The vertical axis endpoints of the first line are aligned with the vertical axis endpoints of the container. Each row follows the previous line.

Center: fill all rows in the center of the container. Each line is adjacent to each other and aligned to the center of the container. The distance between the start and the first line of the vertical axis of the container is equal to the distance between the end and the last line of the vertical axis of the container.

Space-between: All rows are evenly distributed in the container. The distance between two adjacent rows is equal. The start and end edges of the vertical axis of the container are aligned with the edges of the first and last lines respectively.

Space-around: All rows are evenly distributed in the container, and the spacing between adjacent rows is equal. The distance between the start and end sides of the vertical axis of the container and the last line is half of the distance between the two adjacent lines.

Stretch: stretch all rows to fill up the remaining space. The remaining space is evenly allocated to each row.

 

Align-items properties: define how the project is aligned on the side axis.

Flex-start: the start point of the side axis.

Flex-end: the end point of the side axis.

Center: the Center of the side axis.

Baseline: Baseline alignment of the first line of text of the project.

Stretch (default): if the project is not set to height or set to auto, the height of the entire container is fully occupied.

Flex-grow attribute: defines the scale-in ratio of sub-items. The default value is 0. That is, if the container has no space available, it is not enlarged.

If the flex-grow attribute of all sub-items is 1, they will equally divide the remaining space (if the container has the remaining space), if the flex-grow attribute of a project is 2, if all the other subitems are 1, the remaining space occupied by the former is twice that of the other subitems.