CSS Flex – All justify-content examples
CSS is a visual language. Animations can help you speed-learn how justify content works in flex, without having to write much code or go through trial and error process.
This is true especially for beginners, when you don't know anything about Flex, this can help get the bird's eye view picture of CSS flex features.
Table of contents:
All examples of justify-content property values
See all justify-content examples below.
stretch |
A
B
C
|
space-between |
A
B
C
|
space-around |
A
B
C
|
space-evenly |
A
B
C
|
center |
A
B
C
|
flex-end |
A
B
C
|
flex-start |
A
B
C
|
Live CSS Flex Demonstration of justify-content property.
The stretch value is commonly misunderstood. It requires sum of all widths of the items add up to 100% of parent container to start working properly. Otherwise it won't work and might behave as flex-start (which as I understand it, works as a fall back to some default value.)
Not everyone likes purple (or violet) and yellow! Change colors of flex graphic in this tutorial by choosing another color combination. Note you can choose Dark Mode, we worked hard to get this to work!
Select Color Theme Enjoy this tutorial in the color theme of your choice.
CSS flex justify-content image reference
This complete guide to justify-content shows behavior of different values when applied to justify-content property and what exactly happens visually. CSS flex horizontal spacing rules can be confusing if you don't have a way to see all of the possibilities on one screen. You can spend hours in trial and error mode, so why not learn it with one animation?
Please share and post on social media! I spend way too much time on making this :)