- The default direction for a flex container is horizontal (i.e.
flex-direction: row;).
- To change direction to direction to vertical:
flex-direction: column;.
- Some rules change depending on which direction you are working with in flexbox.
- When we changed the flex-direction to
column, flex-basis refers to height instead of width.
flex-direction: column would not work as expected if we used the shorthand flex: 1.
- The reason for this is that the flex shorthand expands
flex-basis to 0, which means that all flex-growing and flex-shrinking would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don’t actually need to have any height at all.
- The can fixed this by specifying
flex: 1 1 auto;.