corbo
Home Docs FAQ
Rows
flex-row
flex-item
flex-item
flex-item
<div class="flex-row">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
Columns
flex-col
flex-item
flex-item
flex-item
<div class="flex-col">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
Grids
flex-grid-3
flex-item-1
flex-item-2
flex-item-3
flex-item-2
flex-item-1
flex-item-1
flex-item-1
flex-item-1
<div class="flex-grid-3">
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-3">flex-item-3</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
</div>
Spacing
flex-grid-3 flex-spacing-1
flex-item-1
flex-item-2
flex-item-3
flex-item-2
flex-item-1
flex-item-1
flex-item-1
flex-item-1
<div class="flex-grid-3 flex-spacing-1">
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-3">flex-item-3</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-1">flex-item-1</div>
</div>
Alignments
flex-grid-4 flex-align-between-start
flex-item-1
flex-item-2
flex-item-3
flex-item-2
flex-item-1
<div class="flex-grid-4 flex-align-between-start">
<div class="flex-item-1">flex-item-1</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-3">flex-item-3</div>
<div class="flex-item-2">flex-item-2</div>
<div class="flex-item-1">flex-item-1</div>
<div>
Nesting
flex-row flex-spacing-1 > flex-item flex-col flex-spacing-1
<div class="flex-row flex-spacing-1">
<div class="flex-item flex-col flex-spacing-1">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-item flex-col flex-spacing-1">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-item flex-col flex-spacing-1">
<div></div>
<div></div>
<div></div>
</div>
</div>
Responsive
flex-row
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-grid-2 flex-grid-tablet-3 flex-grid-laptop-4 flex-grid-desktop-6 flex-spacing-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1
flex-item-1