CSS justify-content

The CSS justify-content property is used to align the flex items (children) inside a flex container along the main axis. It is part of the Flexbox layout module, which provides a flexible way to arrange elements within a container.

The justify-content property can take various values to determine how the flex items are distributed along the main axis. The main axis is the primary direction in which the flex container is laid out.

The syntax for the justify-content property is as follows:

.container {
  display: flex; /* or display: inline-flex; */
  justify-content: value;
}

• .container: Represents the CSS class or selector of the flex container.
• display: flex;: This property is used to create a flex container. The container becomes a flex container, and its direct children become flex items.
• justify-content: value;: Specifies the alignment of the flex items along the main axis. The value can be one of the following:
• flex-start: The flex items are packed towards the start of the main axis. (Default)
• flex-end: The flex items are packed towards the end of the main axis.
• center: The flex items are centered along the main axis.
• space-between: The flex items are evenly distributed along the main axis. The first item is against the start edge, and the last item is against the end edge. The space between each pair of adjacent items is equal.
• space-around: Similar to space-between, but the space is distributed evenly around each flex item. This means there will be space before the first item and after the last item as well.
• space-evenly: The flex items are evenly distributed along the main axis with equal space before the first item and after the last item.

Example:

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

In this example, the flex items inside the container will be centered along the main axis.

The justify-content property is particularly useful for creating responsive layouts and positioning elements within a flex container. It allows you to control the alignment and spacing of flex items with ease.

Keep in mind that justify-content works only if the container has extra space available along the main axis. If the flex items exceed the available space, they may overflow or wrap to the next line, depending on the flex-wrap property.

Flexbox provides a powerful and flexible way to create responsive layouts, especially for arranging content in a row or column-based structure. By combining justify-content with other Flexbox properties, you can create a wide range of complex and responsive designs.