1. Home
  2. Css
  3. Flex direction

Flex direction sets the axis in which the items are positioned. By default it is set to 'row' but optionally 'row-reverse', 'column' or 'column-reverse' can be used.

#css#flex
<style>
    .flex-direction{
        display: flex;
        flex-direction: column;
    }
    .flex-direction span{
        border: 1px solid #4dc3a4;
        padding: 6px;
    }
</style>
<span class="flex-direction">
    <span>Element 1</span>
    <span>Element 2</span>
    <span>Element 3</span>
</span>
Output:

Element 1 Element 2 Element 3

copy
Full Css cheatsheet