What does the justify-content property do?

CSSJunior~1 min read

justify-content aligns flex items along the main axis (that is, along the direction of flex-direction) inside the flex container.

Main values:

javascript

justify-content: flex-start;   /* push items to the start of the main axis */
justify-content: flex-end;     /* push to the end */
justify-content: center;       /* center */
justify-content: space-between;/* equal spacing between items, no spacing at the edges */
justify-content: space-around; /* equal spacing around each item */
justify-content: space-evenly; /* equal spacing between items and the container edges */

The main axis is set via flex-direction, and justify-content distributes elements along it.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.