Change the Spacing of Flexed Components with justify-content

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

We can space items inside of a flexed component in the "on-axis" direction, with justify-content.

Justify content can take the following values: flex-start, flex-end, center, space-between, space-around, or space-evenly

Instructor: [00:00] Once we have our container flexed, we want to change the spacing of these boxes. We can do that with the justify content. The default is flex start. If we refresh now, we get the same arrangement as before. Everything's at the start of the box. We can change that, though, to be flex end. If we do flex end, then everything goes to the end of the box.

[00:28] The next one that we could do is center, where everyone jumps to the center. After that, we'll show space between, where we have the outermost ones being pushed to the side, and we get space in between them.

[00:46] This is really nice if you have a grid of things you want to display. You can do space between. If you want some space around the outside, then you could space around. That gives a little bit of space. It's half the space as the internal around the outside. Finally, there is space evenly, which puts the same amount of space between each of the boxes.

[01:09] These are the different ways you can arrange things in a row. Remember that justify content is in the axis of the flex direction. Let's go through these again, but change the flex direction to column. Remember that we have to change the body to row.

[01:22] I'll show you what happens if we refresh now. We don't get it flexed all the way here because the body is also set to column. If we change the body to a row, there we go. Now we have it flex this way. Justify content is in whatever direction the flex direction is.

[01:36] This is the axis of the flex direction. We'll space it evenly, or we can show, for example, space end. We'll push it all the way to the bottom. These all work in whatever direction the flex direction is set.

~ 28 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today