Chrome Extension

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.

Search history ×