Flex wrap

Syntax

Class
Properties
flex-wrap
flex-wrap: wrap;
flex-wrap-reverse
flex-wrap: wrap-reverse;
flex-nowrap
flex-wrap: nowrap;
<div class="t1 flex flex-row flex-wrap w-320 bg-c-white p-8 shadow-4"> <div class="t1 w-48 h-48 bg-c-blue-700 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-600 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-500 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-400 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-300 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-200 m-8"></div> <div class="t1 w-48 h-48 bg-c-blue-100 m-8"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Wrap into multiple lines.
t1 flex-wrap
.t1.flex-wrap { flex-wrap: wrap; }
Do not wrap.
t1 flex-nowrap
.t1.flex-nowrap { flex-wrap: nowrap; }
Wrap in reverse order.
t1 flex-wrap-reverse
.t1.flex-wrap-reverse { flex-wrap: wrap-reverse; }