Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change the Spacing of Flexed Components with justify-content

    Chris AchardChris Achard
    flexboxFlexbox
    cssCSS

    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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.