justify-content

The property aligns flex items within a flex container along the main axis.

When arranging flex items in a row, the property controls horizontal alignment. When arranged in a column — vertical alignment.

The code below will make the flex items spread across the entire width of the parent, dividing the free space equally.

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

This property defines how the free space is distributed between items along the main axis (for flexboxes) and horizontally (for grids).

• start — items are pushed to the edge from which reading begins in the language that the site is displayed in.
• end — items are pushed to the edge opposite to the beginning of the reading direction in the site's language.
• flex-start — items are pushed to the edge where the main axis begins.
• flex-end — items are pushed to the edge where the main axis ends.
• left — items will be pushed to the left edge of the parent.
• right — items will be pushed to the right edge of the parent.
• center — items are aligned to the center of the parent.
• space-between — the edge items are pushed to the edges of the parent, while the remaining items are laid out evenly within the container, such that the spacing between them is the same.
• space-around — free space is equally divided among the items, and half of this share is placed on either side of each item. Thus, there will be equal distance between adjacent items and half of this distance outside the edge items.
• space-evenly — the free space will be distributed so that the distance between any two items is the same and the distance from the edge items to the edge is the same.

If the main axis runs horizontally, for a site with left-to-right (LTR) writing direction, the value start will push the items to the left edge, while the value end will push the items to the right edge. For sites with right-to-left (RTL) writing direction, items will be pushed to the opposite edges for similar values.

In case the property flex-direction: column is specified, then the values left and right trigger as start.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 If there are only two elements inside a flex container, it is convenient to use justify-content: space-between to push them to the opposite edges of the parent. This mimics the behavior of the float property, but without the consequences.