Align Elements Using the justify-content Property
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Use the align-items property to align the items vertically. The justify-content property can also be used on a grid container to align grid items in the inline direction. For pages in English, inline direction is left to right and block direction is downward.
What is the use of justify content? The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis. Remember in math class, we were taught x and y axis.
Flex-start - Default value. Items are positioned at the beginning of the container.
Flex-end - Items are positioned at the end of the container.
Center - Items are positioned in the center of the container.
Space-between - Items will have space between them.
Space-around - Items will have space before, between, and after them.
Space-evenly - Items will have equal space around them.
For more information about the flex-box properties read here by clicking on the link down below:
https://www.freecodecamp.org/news/fle...