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

New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch.