Learn the Front-end Beta Search

justify-content

Draft

Definition

The justify-content CSS property is used in flexbox layouts to control the alignment and spacing of flex items along the main axis (horizontally, in the case of row direction).

The justify-content property accepts various values that determine how flex items are distributed within a flex container:

  • flex-start: Flex items are aligned to the start of the container.
  • flex-end: Flex items are aligned to the end of the container.
  • center: Flex items are centered within the container.
  • space-between: Flex items are evenly distributed along the main axis, with space placed between them.
  • space-around: Flex items are evenly distributed along the main axis, with equal space placed before, between, and after them.
  • space-evenly: Flex items are evenly distributed along the main axis, with equal space placed between them.

Here’s an example:

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

In this example, the .container class is set as a flex container, and the justify-content: center; rule centers the flex items horizontally within the container.

You can also use other values to achieve different alignments and spacing, such as flex-start, flex-end, space-between, space-around, or space-evenly, based on your layout requirements.

The justify-content property is a powerful tool in flexbox layouts, allowing you to control the positioning and distribution of flex items along the main axis.

Related posts