Element content distribution and details in block-level rows
__
The justify-content attribute is used on the flexible container layout to align items along the main axis (x)
The syntax of justify-content is as follows
justify-content: flex-start
flexible items move closer to the beginning of the line (left-aligned)
flex-end
flexible items are aligned to the end of the line (right-aligned)
center
flexible items are aligned in the center and
space-between
flexible items are evenly distributed on the line , And the spacing distance is equal, the spacing distance between the beginning and the end of the line is zero.
If there are only two flexible items, one at the beginning and the end of the line are shown in the figure:
space-around The
distance between the
beginning and the end of the line of the flexible item is half of the spacing, and the space- evenly distribution is evenly distributed.
The distance between the beginning and end of the flexible item is the same
as the distance between the flexible item.The above picture is a very intuitive demonstration of the 6 value effects and differences.
We can test the flexible layout operation by ourselves through the online example code
https://wow.techbrood. com/fiddle/17128