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;


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy