Flex into a Row or a Column with flex-direction
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.