Flex direction

flex-direction: row row-reverse column column-reverse

1

2

3

4

<div class="container">

<div class="flex-item">1</div>

<div class="flex-item">2</div>

<div class="flex-item">3</div>

<div class="flex-item">4</div>

</div>

.container{
flex-direction: rowrow-reversecolumncolumn-reverse;
}

row (default): left to right in ltr; right to left in rtl
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

Back