Flex into a Row or a Column with flex-direction

Change the Spacing of Flexed Components with justify-content

Change the off-axis Alignment of a Flexed Container with `align-items`

Change the Alignment of a Single Flexed Item with 'align-self'

Wrap Elements Inside of a Flexed Container with `flex-wrap`

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

Get Started with Flexbox CSS Layouts

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`

https://app.egghead.io/api/v1/lessons/flexbox-change-the-spacing-of-flexed-components-with-justify-content/subtitles

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.

Change the Spacing of Flexed Components with justify-content

Share this video with your friends

Course

Get Started with Flexbox CSS Layouts