The **`flex-direction`** property specifies the direction and axis of the flex items (children elements) inside a flexible container or [flexbox](https://www.educative.io/answers/what-is-a-css-flexbox).  



# Implementation

We make the container a Flexbox by setting `display: flex`. We then use `flex-direction: column` to set the axis to be vertical.  
>Try experimenting with different values like `row`, `row-reverse`, and `column-reverse` for `flex-direction`.

#container {
  width: 180px;
  height: 180px;
  border: 1px solid black; 
  display: flex;
  flex-direction: column;
}

#container div {
  width: 50px;
  height: 50px;
}

codemirror

CSS flex-direction property

Specifies the direction and axis for flex items within a flexbox. Default is row.

CSS flex-direction property

Syntax

Implementation