Understanding flex-direction: column in CSS
flex-direction: column changes the layout direction of a flex container so that flex items are stacked vertically along the main axis, from top to bottom.
Items are laid out vertically along the main axis.
The first item appears at the top, and subsequent items stack below in order.
Main-axis properties like
justify-contentnow control vertical spacing between items.Cross-axis properties like
align-itemscontrol horizontal alignment within the container.It is useful for creating vertical menus, stacked cards, or columnar layouts.
In this example, the .container flex items are stacked vertically. justify-content distributes space along the vertical main axis, and align-items centers items along the horizontal cross axis.
Use
flex-direction: columnfor vertical layouts like sidebars, stacked cards, or vertical forms.Combine with
justify-contentandalign-itemsto control spacing and alignment in both axes.Test responsiveness to ensure vertical stacking adapts well to different screen heights.
Use
column-reverseif you need to reverse the vertical order of items for design purposes.