CSS justify-content: space-evenly

Overview

The 'justify-content' property's space-evenly value spreads the space between items evenly. It is similar to space-around, however it gives equal room on the edges rather than half-sized space. It can be used in both CSS flexbox and CSS grid.

Formal Definition

Specifications

CSS Box Alignment Module Level 3 # align-justify-content CSS Flexible Box Layout Module Level 1 # justify-content-property

Syntax

/* Positional alignment */
 justify-content: center;
 /* Pack items around the center */
 justify-content: start;
 /* Pack items from the start */
 justify-content: end;
 /* Pack items from the end */
 justify-content: flex-start;
 /* Pack flex items from the start */
 justify-content: flex-end;
 /* Pack flex items from the end */
 justify-content: left;
 /* Pack items from the left */
 justify-content: right;
 /* Pack items from the right */
 /* Baseline alignment */
 /* justify-content does not take baseline values */
 /* Normal alignment */
 justify-content: normal;
 /* Distributed alignment */
 justify-content: space-between;
 /* Distribute items evenly The first item is flush with the start, the last is flush with the end */
 justify-content: space-around;
 /* Distribute items evenly Items have a half-size space on either end */
 justify-content: space-evenly;
 /* Distribute items evenly Items have equal space around them */
 justify-content: stretch;
 /* Distribute items evenly Stretch 'auto'-sized items to fit the container */
 /* Overflow alignment */
 justify-content: safe center;
 justify-content: unsafe center;
 /* Global values */
 justify-content: inherit;
 justify-content: initial;
 justify-content: revert;
 justify-content: unset;

Code snippets

team.html

Source:team.html

index.html

Source:index.html

Browser Compatibility