CSS `flex-direction` property is used to define the direction in which flex items are placed in the flex container. It controls the flow and the arrangement of items within the flex container.
There are four possible values for `flex-direction`:
1. `row` (default): Items are placed in a row, starting from the left side of the container.
2. `row-reverse`: Items are placed in a row, starting from the right side of the container.
3. `column`: Items are placed in a column, starting from the top of the container.
4. `column-reverse`: Items are placed in a column, starting from the bottom of the container.
Let's see some examples to understand how `flex-direction` works:
In the example above, we have set `flex-direction: row;` which means all items are placed in a row from left to right inside the flex container.
Now, let's try `flex-direction: column;`:
In this example, all items are placed in a column from top to bottom inside the flex container.
You can experiment with `flex-direction` and try out the other values (`row-reverse` and `column-reverse`) to see how the arrangement of items changes within the flex container.