A column stacks content vertically, usually from top to bottom. In flexbox, it turns the container’s main axis vertical, while the cross axis runs horizontally. section 12.2
Think of flex-direction as choosing which way the row of boxes travels:
- row moves items horizontally from left to right. section 12.2
- column moves items vertically from top to bottom. section 12.2
- column-reverse keeps the vertical arrangement but runs it from bottom to top. section 12.2
A centered portfolio stack
Make the body a row-direction flex container and center its contents. Then make the nested container a column-direction flex container so its content starts at the top and stacks vertically. section 20.10
container {
display: flex;
flex-direction: row|row-reverse|column|column-reverse;
}
Try each flex-direction value and watch the same items switch between horizontal, vertical, and reversed arrangements. section 12.2
