January 17, 2021
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 */
See the Pen justify-content by Andy Leverenz (@webcrunchblog) on CodePen.
Tags: flexbox justify-content
Leave a reply
Est. reading time: 1 minutes
Stats: 2,546 views
Source code: Download the source code
Part of the CSS Flexbox collection
Sign in or Sign up to leave a response.