CSS3 Elastic Layout content Alignment (Justify-content) Properties use detailed

The content alignment (Justify-content) attribute is applied to the elastic container, aligning the flex item along the main axis of the elastic container (main axis).

The operation occurs after the elastic length and the automatic margin is determined. It is used to allocate when there is space left, and it affects the alignment of items when a content overflow occurs.

Note: There are two basic terms in the Flex layout main axis and cross axis, in general, we can think of them as rows and columns on the screen (but strictly speaking, this is related to write mode).

Then Main-start and main-end can be seen as the left and right sides of the elastic container, respectively.

The justify-content syntax is as follows:

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

The parameters are described as follows:

Flex-start
The flex item fills the wardrobe next to it. This is the default value. The Main-start margin edge of the first flex item is placed on the main-start edge of the row, and subsequent flex items are aligned in turn.
Flex-end
Flex items Fill the end of the line next to each other. The main-end margin edge of the first flex item is placed on the main-end edge of the row, and subsequent flex items are aligned in turn.
Center
The flex item is centered next to the fill. (If the remaining free space is negative, the flex item will overflow in two directions at the same time).
Space-between
The elastic items are evenly distributed across the line. If the remaining space is negative or if there is only one flex item, the value is equal to Flex-start. Otherwise, the margins of the 1th elastic item are aligned with the main-start edge of the row, and the margins of the last 1 flex items are aligned with the main-end edges of the rows, and then the remaining elastic items are distributed across the line with equal intervals between adjacent items.
Space-around
Elastic items are evenly distributed across the line, leaving half of the space between the two sides. If the remaining space is negative or if there is only one flex item, the value is equal to center. Otherwise, the flex items are distributed along the line, spaced equally (for example, 20px), with half the interval (1/2*20px=10px) between the ends and the elastic container.

It is very intuitive to demonstrate the effects and differences of the above 5 values.

We can test it ourselves by the online instance code:

http://wow.techbrood.com/fiddle/17128

by Iefreer

CSS3 Elastic Layout content Alignment (Justify-content) Properties use detailed