Flex into a Row or a Column with flex-direction

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

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.

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.

egghead
egghead
~ 17 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 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

  • 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