Think of a flex container as a shelf. Once flex-direction chooses which way the shelf runs, justify-content decides where its items sit along that main axis: at the start, end, center, or spread through the available room. It belongs on the container, not on each individual item. section 12.2
Choose a value based on the arrangement you want:
- flex-start places items at the beginning of the container. It is the default, so writing it explicitly is optional. section 12.2
- flex-end places items at the end, and center places them in the middle. section 12.2
- space-between puts the first item at the beginning, the last at the end, and distributes the remaining items evenly between them. section 12.2
- space-around gives every item equal space on both sides. Interior gaps look larger because neighboring items contribute space to the same gap. section 12.2
container {
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around;
}
Start by making the element a flex container, then select one value. With the usual horizontal main axis, these choices move items left-to-right; change flex-direction and the same property follows the new main axis. section 12.2
Center a heading in a window
Make a div fill the browser height and turn it into a flex container. Set justify-content: center to center its h1 along the main axis, then pair it with align-items: center to center it along the cross axis too. section 12.5
For a larger layout, justify-content can center a row of page content in the browser window. A nested column can instead use flex-start so its content begins at the top. Try changing one value at a time and watch the available space move. section 20.10 section 12.2
