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.
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 egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
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!