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

    Flex into a Row or a Column with flex-direction

    Chris AchardChris Achard
    flexboxFlexbox
    cssCSS

    After setting display: flex on a parent element, you can use flex-direction to switch the container to be either a row or a column.

    We also switch the body between row and column.

    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: 0:00 We have three boxes here, red, green, and blue. They're just defined with background colors and borders. We want to control them to be either in a row or a column.

    0:10 The first thing we need to do is in the container, we need to set display: flex. Then if we just save and refresh now, we can see it already switches to a row because row is the default mode for display: flex. We can change that with a flex-direction.

    0:30 The default is row. If we refresh, nothing changes.

    0:33 We could switch that to column. Now, it switches to a column of boxes. You may notice that the container is still flexed all the way across the body. That's because the body is set to not display flex. We can change the body as well to display flex.

    0:49 Then if we refresh now, it switches to flex the entire container because the default, remember, is flex-direction: row, so it's expecting more elements in the body to be in a row here.

    1:01 We can change that flex-direction as well to be a column instead of a row. It switches back here and the next element will be in a column underneath it. We can switch it back to its default, which is row. That way we get the container flexed in this direction.