Published Jul 23, 2021Updated Sep 3, 2021
Contribute to Docs

A property that specifies the direction in which elements are distributed within a container.


#element-container {
display: flex;
flex-direction: <flex-value>;

The <flex-value> can be one of four options:

  • Elements arranged left to right: row
  • Elements arranged right to left: row-reverse
  • Elements arranged top to bottom: column
  • Elements arranged bottom to top: column-reverse

Example 1

Content that is arranged horizontally within a container:

#spam-container {
display: flex;
flex-direction: row;

All contributors

Looking to contribute?

Learn CSS on Codecademy