Andy Leverenz
January 17, 2021
•Last updated November 5, 2023
Intro to CSS Flexbox - Justify Content
The justify-content property automatically assigns space between and around flex items along the main-axis of a flex container. This property also works for grid-items much like flex items.
There are a few properties you can tweak to allow content to shift dynamically inside a parent flex container.
justify-content: center; /* Shift items around the center */
justify-content: flex-start; /* Shift flex items from the start */
justify-content: flex-end; /* Shift flex items from the end */
/* Normal alignment */
justify-content: normal;
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 */
CodePen
See the Pen justify-content by Andy Leverenz (@webcrunchblog) on CodePen.
Est. reading time:
1 minutes
Stats:
3,738 views
Source code:
Source code
Categories
Collection
Part of the CSS Flexbox collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.