The CSS flex-direction property sets a flex container’s main-axis direction and item order. The default row flows along the inline direction; column stacks items along the block direction, while row-reverse and column-reverse reverse those flows. section 4.3
Changing direction rotates the main axis and keeps the cross axis perpendicular. In a column flexbox, flex-basis, flex-grow, and flex-shrink govern height rather than width, but vertical growth only matters when the container has an externally determined height. section 4.3.1
Stacking and equalizing a sidebar
Use a nested flexbox when a sidebar’s tiles must fill the height established by a taller neighboring column: .column-sidebar { display: flex; flex-direction: column; gap: var(--gap-size); } .column-sidebar > .tile { flex: 1; } The outer layout determines the sidebar height; the inner column distributes that height between its tiles. Without this inner direction change, the tiles remain naturally stacked and may not reach the height of the main tile. section 4.3.1 section 4.3
Listing 4.9 Creating a flex column on the right
.column-sidebar { #1
flex: 1; #1
display: flex; #1
flex-direction: column; #1
gap: var(--gap-size); #1
}
.column-sidebar > .tile {
flex: 1; #2
}
Inspect the complete sidebar rule and see how flex-direction: column combines with flex: 1 on the child tiles. section 4.3.1
A practical flexbox workflow is to identify the container and items, enable display: flex, choose a gap or flex-direction when needed, and then assign flex values to control sizing. section 4.4
