Box model for flex layouts

The Flex box model consists of a container (Flex container) and a direct child element of the container (Flex item).

As defined by the container (Flex container), with the spindle (main axis) and the intersection axis (cross axis), the starting position of the spindle (the intersection with the border) is called main start, and the end position is called the main end. The starting position of the intersection is called Cross Start, the end position is called Cross end.

(Note: It is important that the direction of the main axis and cross axis will change as the layout arrangement changes) the spindle (main axis) can be either horizontal or vertical, while the crossing axis is always perpendicular to the spindle

Display:flex | Inline-flex (applies to parent class container elements)

Defines a flex container, inline or based on a specified value, for the following subclass container.

Box: Displays the object as an elastic telescopic box. (Telescopic box oldest version 2009)

Flexbox: Displays the object as an elastic telescopic box. (Telescopic box Transition version 2011)

Flex: Displays the object as an elastic telescopic box. (The latest version of the Telescopic box)

首先得指定元素是flex布局     块状元素 -> display:flex     行内元素 -> display:inline-flex     例如:     .box{       display:flex;      }

flex-direction (on the element of the parent class container): determine the direction of the spindle

Flex-direction:row | Row-reverse | Column | Column-reverse

Row (default): The spindle is horizontally oriented, left to right

Row-reverse: The spindle is horizontally oriented. Right to Left

Column: The spindle is vertically oriented, from top to bottom

Column-reverse: The spindle is vertically oriented, from bottom to top

Flex-wrap (for parent class containers): If the child elements of a telescopic box object are wrapped when they are outside the parent container

Flex-wrap:nowrap | Wrap | Wrap-reverse

NoWrap: Does not wrap when child elements overflow the parent container.

Wrap: Wraps automatically when a child element overflows the parent container.

Wrap-reverse: Reverse wrap arrangement (the next line position is opposite to the intersection axis)

Flex-flow (for parent class containers)//flex-direction and FLEXWRAP compliant

Flex-flow: < ' flex-direction ' > | | < ' flex-wrap ' > [flex-direction]: Defines the direction in which the elastic box elements are arranged. [Flex-wrap]: Defines whether the elastic box element overflows the parent container when wrapping.

For example: Flex-flow:row nowrap;

Justify-content (applies to the parent class container): determining alignment in the spindle direction

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

Flex-start: Start position of the line (default value)

Flex-end: End position of the line

Center: The center of the line, the space is not enough, then out of space

Space-between: Evenly distributed in rows

Space-around: Evenly distributed in rows, with half of the spacing between child elements and child elements preserved on both ends.

Space-evenly: Evenly arranges each element, the distance between each element is equal

Align-items (applies to the parent class container): to determine the alignment on the intersection axis

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

Flex-start: Starting position of the intersection axis

Flex-end: End position of the intersection axis

Center: Center on Cross Axis

Baseline: Maintain alignment on the baseline

Stretch: If the calculated value of the cross-axis dimension of an entry is "Auto", the value it actually uses will make the box as full as possible in the cross-axis direction. (does not work after setting the height)

Align-content (applies to the parent class container): used to process cross-axis white space (no effect on single line)

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

Flex-start: Row is centered on the start position of the intersection of the container

Flex-end: The line is centered at the end of the intersection of the container

Center: Rows are centered in the center of the container

Space-between: Rows are evenly distributed in the container.

Space-around: Rows are evenly distributed across the container, preserving half of the space between child elements and child elements.

Space-evenly: Evenly distributed across the cross-axis

Stretch: Stretches the line to fill the remaining space. The extra space is evenly distributed between rows, making the cross-axis size of each row larger.

Align-self (for sub-class containers):

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

Flex-start: Starting position of the intersection axis

Flex-end: End position of the intersection axis

Center: Center on Cross Axis

Baseline: Maintain alignment on the baseline

Stretch: If the calculated value of the cross-axis dimension of an entry is "Auto", the value it actually uses will make the box as full as possible in the cross-axis direction. (Does not work after setting the height)

When the value of "align-self" is auto, its computed value is the value of the parent node's property "Align-items". If the node does not have a parent node, the computed value is "Stretch".

Used to overwrite the specified alignment of the container

Order (for child elements): used to set the order in which the containers are arranged

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

Flex: For sub-class containers: Sets or retrieves how the child elements of a telescopic box object allocate space.

Composite properties.

If the abbreviation is flex:1, its calculated value is: 1 1 The computed value of the 0%;none:none keyword is: 0 0 Auto

Flex:auto 1 1 Auto; Flex:2 100px; 2 1 100px;

Flex:none | [Flex-grow] | | [Flex-shrink] | | [Flex-basis]

[Flex-grow]: Defines an extended ratio of elastic box elements. Default value: 0 (each sub-container expands content by this scale when there is content remaining)

[Flex-shrink]: Defines the shrinkage ratio of the elastic box element. Default value: 1 (contraction ratio, this property only works when there is a content overflow)

[Flex-basic]: Defines the default datum value for the elastic box element. Default value: Auto (this value is the benchmark when expanding or shrinking content), and width is the base for auto. The rest of the values are the benchmark

Box model for flex layouts