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

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`.

https://app.egghead.io/api/v1/lessons/flexbox-flex-into-a-row-or-a-column-with-flex-direction/subtitles

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.

Flex into a Row or a Column with flex-direction

Share this video with your friends

Course

Get Started with Flexbox CSS Layouts