justify-content [row]

Justify content The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. flex-start; Items are positioned at the beginning of the container. flex-end; Items are positioned at the end of the container. center Items are positioned at the center of the container. space-between; Items are positioned with space between the lines. space-around; Items are positioned with space before, between, and after the lines.

justify-content [row]

Here comes the fun part. This is the property that sets alignment along the main axis. In this example, the main axis lies horizontally. In other words, the flex-direction is set to row.

This is probably my most used parent property. You just choose the layout you like and BAM Flexbox automatically does it for you. And it's absolutely responsive. As you grow or shrink the window width, Flexbox will do the behind-the-scene calculation and ensure that your chosen layout is maintained.

.parent {
  justify-content: flex-start /* default */
                or flex-end
                or center
                or space-around
                or space-between
                or space-evenly
}
 

The justify-content property is used to align the flex items:

• The center value aligns the flex items at the center of the container:

.flex-container { display: flex; justify-content: center; }

• The flex-start value aligns the flex items at the beginning of the container (this is default):

.flex-container { display: flex; justify-content: flex-start; }

• The flex-end value aligns the flex items at the end of the container:

.flex-container { display: flex; justify-content: flex-end; }

• The space-around value displays the flex items with space before, between, and after the lines:

.flex-container { display: flex; justify-content: space-around; }

• The space-between value displays the flex items with space between the lines:

.flex-container { display: flex; justify-content: space-between; }