justify-content

Values

• normal: the initial value. In a flexbox it is the same as flex-start.
• flex-start, flex-end: packs items toward the end where they start or end. With flex-direction set to row-reverse and the like, the ends swap.
• center: packs items in the middle.
• space-between: puts the first and last items at the ends and shares the rest of the space equally between items.
• space-around: puts equal space on both sides of each item, so the space at the ends is half the space between items.
• space-evenly: makes every gap equal, including the ends.
• start, end: packs items toward the start or end given by the text direction. They do not swap with -reverse.
• left, right: packs items to the left or right. When items run vertically (column), they act as start.
• stretch: the same as flex-start in a flexbox. In a grid it widens auto-sized columns to fill the box. To widen the items themselves in a flexbox, set flex-grow on them.

The preview on this page sets display: flex as a helper declaration and places four 3em-wide items. In a grid, justify-content decides where the columns go as a group when they are narrower than the box.

safe and unsafe

Put safe before a position keyword and, when items overflow the box, they are packed to start instead, so the overflow never hides on the side you cannot scroll to (left or top). unsafe keeps the requested position even when items overflow. With neither, current browsers behave like unsafe. The items in this preview never overflow, so neither keyword changes what you see.