css

flex direction in CSS

.flex_element {
    display: flex;
    flex-direction: row;
}

.flex_element {
    display: flex;
    flex-direction: row-reverse;
}

.flex_element {
    display: flex;
    flex-direction: column;
}

.flex_element {
    display: flex;
    flex-direction: column-reverse;
}

.flex_element {
    display: flex;
    flex-direction: initial;
}

'flex-direction' property in CSS is used to change the direction of children's elements of a flex element.

flex-direction: row - Make children elements to be stacked in the row direction.
flex-direction: row-reverse - It is the same as flex-direction: row but the children's elements of flex item will start from the end and the position of children's elements will be reversed.

flex-direction: column - Make children elements to be stacked in the column direction.

flex-direction: column-reverse - It is the same as flex-direction: column but the children's elements of flex item will start from the end and the position of children's elements will be reversed.

Was this helpful?