Flex direction

Syntax

Class
Properties
flex-row
flex-direction: row;
flex-row-reverse
flex-direction: row-reverse;
flex-col
flex-direction: column;
flex-col-reverse
flex-direction: column-reverse;
<div class="t1 flex flex-row w-320 bg-c-white p-16 shadow-4"> <div class="t1 w-48 h-48 bg-c-blue-500 mr-16"></div> <div class="t1 w-48 h-48 bg-c-blue-400 mr-16"></div> <div class="t1 w-48 h-48 bg-c-blue-300 mr-16"></div> <div class="t1 w-48 h-48 bg-c-blue-200"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Use flex-row
t1 flex-row
.t1.flex-row { flex-direction: row; }
Use flex-row-reverse
t1 flex-row-reverse
.t1.flex-row-reverse { flex-direction: row-reverse; }
Use flex-col
t1 flex-col
.t1.flex-col { flex-direction: column; }
Use flex-col-reverse
t1 flex-col-reverse
.t1.flex-col-reverse { flex-direction: column-reverse; }