Use of H5 elastic box layout (parent container attribute), h5 elastic

Use of H5 elastic box layout (parent container attribute), h5 elastic

Add display: flex/inline-flex to the parent container

 

The parent container can use the following attributes:

1. flex-direction: determines the direction of the spindle

There are four attribute values:

Row (default): the spindle is horizontal and the start point is left.

 

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.

 

2. flex-wrap: how to wrap a line if an axis does not fit.

There are three property values:

Nowrap (default): no line break. When the width of the parent container is insufficient, each item is squeezed properly.

 

Wrap: line feed. The first line is at the top of the parent container.

 

Wrap-reverse: line feed. The first line is at the bottom of the parent container.

 

 

 

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

4. justify-content: defines the alignment of the project on the main axis.

Has the following attribute values:

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. (The first and last projects are respectively at the leftmost or rightmost of the project)

 

Space-around: the intervals between two sides of each project are equal. Therefore, the interval between projects is twice the interval between projects and borders. (The first and end projects are separated from the parent container)

 

 

 

5. ⑤ align-items: defines how the project is aligned on the cross axis

Has the following attribute values

Flex-start: the starting point of the cross axis.

 

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

 

Center: the center of the cross axis.

 

Baseline: baseline alignment of the first line of text of the project. (Line height and font size affect the baseline of each line)

 

Stretch (default): If the sub-container is not set to height or is set to auto, the height of the entire parent container is fully occupied.

 

6. align-content: the attribute defines the alignment of multiple Axis Lines. This attribute does not work if the project has only one axis.

Has the following attribute values

Flex-start: align with the starting point of the cross axis.

Flex-end: align with the end point of the cross axis.

Center: align with the midpoint of the cross axis.

Space-between: alignment with the two ends of the cross axis. The interval between the two ends of the cross axis is evenly distributed.

Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between axes is twice the interval between axes and borders.

Stretch (default): The axis occupies the entire cross axis.