justify-content
Defines how the browser distributes space between and around content items along the main axis of a flex container or the inline axis of a grid container.
It is documented as part of the CSS Box Alignment, CSS Flexible Box Layout specification.
Syntax
/* Usage Example */
.container {
display: flex;
justify-content: space-between;
/* pushes items to the edges with even space between */
}
/* Syntax */
justify-content: normal;
justify-content: left;
justify-content: right;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;
justify-content Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
29+
20+
9+
12+