Last updated on : 2022-04-10
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.
Inherited
no
Applies to
flex containers
Initial value
normal
Animation type
discrete
Computed value
as specified
CSS Box Alignment Module Level 3 # align-justify-content CSS Flexible Box Layout Module Level 1 # justify-content-property
/* 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;
Browser Support For Safari on iOS Versions
Browser Support For Android Browser Versions
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Browser Support For Samsung Internet Versions
Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for CSS justify-content: space-evenly and many more web technologies that are a part of your website or web-application.
Last Modified date
2022-04-10
Data sourced from
Test this and other features on your website for compatibility across
3,000 real browsers and devices using
I hope we're able to help you build browser compatible web experience.
Fast track your browser testing experience on 3000+ browsers and OS combinations with LambdaTest.
Sarah Elson (Product & Growth Lead)