Flexbox
Control CSS flexbox layout.
Classes
| Class | Properties |
|---|---|
| .flex | display: flex; |
| .inline-flex | display: inline-flex; |
| .flex-row | flex-direction: row; |
| .flex-row-reverse | flex-direction: row-reverse; |
| .flex-column | flex-direction: column; |
| .flex-column-reverse | flex-direction: column-reverse; |
| .flex-wrap | flex-wrap: wrap; |
| .flex-wrap-reverse | flex-wrap: wrap-reverse; |
| .flex-nowrap | flex-wrap: nowrap; |
| .flex-initial | flex: 0 1 auto |
| .flex-1 | flex: 1 1 0% |
| .flex-auto | flex: 1 1 auto |
| .flex-none | flex: none |
| .flex-grow | flex-grow: 1 |
| .flex-shrink | flex-shrink: 1 |
.flex-row
Sets the flex-direction property to row.
xxxxxxxxxx1
<div class="flex flex-row">2
<div class="border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="border-1 border-gray-3 p-4 bg-gray-1">2</div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1">3</div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1">4</div>6
</div>1
2
3
4
.flex-row-reverse
Sets the flex-direction property to row-reverse.
xxxxxxxxxx1
<div class="flex flex-row-reverse">2
<div class="border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="border-1 border-gray-3 p-4 bg-gray-1">2</div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1">3</div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1">4</div>6
</div>1
2
3
4
.flex-column
Sets the flex-direction property to column.
xxxxxxxxxx1
<div class="flex flex-column">2
<div class="border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="border-1 border-gray-3 p-4 bg-gray-1">2</div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1">3</div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1">4</div>6
</div>1
2
3
4
.flex-column-reverse
Sets the flex-direction property to column-reverse.
xxxxxxxxxx1
<div class="flex flex-column-reverse">2
<div class="border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="border-1 border-gray-3 p-4 bg-gray-1">2</div>4
<div class="border-1 border-gray-3 p-4 bg-gray-1">3</div>5
<div class="border-1 border-gray-3 p-4 bg-gray-1">4</div>6
</div>1
2
3
4
.flex-wrap
Sets the flex-wrap property to wrap.
xxxxxxxxxx1
<div class="flex flex-wrap">2
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">2</div>4
</div>1
2
.flex-nowrap
Sets the flex-wrap property to nowrap.
xxxxxxxxxx1
<div class="flex flex-nowrap">2
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">2</div>4
</div>1
2
.flex-wrap-reverse
Sets the flex-wrap property to wrap-reverse.
xxxxxxxxxx1
<div class="flex flex-wrap-reverse">2
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">1</div>3
<div class="min-w-2/3 border-1 border-gray-3 p-4 bg-gray-1">2</div>4
</div>1
2