CSS3 detailed description of how to use the justify-content attribute

CSS3 detailed description of how to use the justify-content attribute

The content alignment (justify-content) attribute is applied to the elastic container, and the elastic items are aligned along the main axis of the elastic container.

This operation takes place after the elastic length and automatic margin are determined. It is used to allocate the remaining space and affects the project alignment in case of content overflow.

Note: There are two basic terms for an elastic layout: main axis and cross axis. Generally, we can regard them as the rows and columns on the screen (but strictly speaking, this is related to the write mode and the elastic stream direction ).

The main-start and main-end can be regarded 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

Parameters are described as follows:

Flex-start
The elastic project is filled with the line header. This is the default value. The main-start margin edge of the first elastic item is placed on the main-start edge of the line, and the subsequent elastic items are placed in order.
Flex-end
The elastic project is filled at the end of the line. The main-end outer margin edge of the first elastic item is placed on the main-end edge of the line, and the subsequent elastic items are placed in order.
Center
The auto project center is closely filled. (If the remaining free space is negative, the elastic project will overflow in both directions ).
Space-
The elastic items are evenly distributed on this row. If the remaining space is negative or there is only one elasticity, this value is equivalent to flex-start. Otherwise, the margins of the 1st auto items are aligned with the main-start edge of the row, while the margins of the last auto item are aligned with the main-end edge of the row, then the remaining elastic items are distributed on the row, and the interval between adjacent projects is equal.
Space-around
The elastic project is evenly distributed on the row, with half of the gap between the two sides. If the remaining space is negative or there is only one elasticity, this value is equivalent to center. Otherwise, the elastic project is distributed along this line and the intervals are equal (for example, 20 px). At the same time, there is a half interval between the first and end sides and the elastic container (1/2 * 20px = 10px ).

It intuitively demonstrates the effects and differences of the above five values.