Set flex-direction to row when flex items should run horizontally from left to right. This makes the horizontal direction the container’s main axis; the cross axis runs perpendicular to it. Because row is the default value, declaring it is optional. section 12.2
Think of row as placing items on a shelf:
- The items travel from left to right. section 12.2
- The horizontal line is the main axis. section 12.2
- Use justify-content to arrange the items along that main axis, such as centering them. section 20.10
.container {
display: flex;
flex-direction: row;
}
Try the default horizontal arrangement directly on a flex container. section 12.2
A centered row of portfolio content
Set the body to display: flex; flex-direction: row; justify-content: center; to create one horizontal row with content centered in the browser window. A nested container can switch to flex-direction: column when its own content should stack vertically. section 20.10
