Columns & Layouts
Utilities for flex columns and common flex layouts.
Classes
| Class | Output |
|---|---|
| .d-fl-col1 | > * { flex-basis: calc(100% - (var(--fl-gap) * 2)); } |
| .d-fl-col2 | > * { flex-basis: calc(50% - (var(--fl-gap) * 2)); } |
| .d-fl-col3 | > * { flex-basis: calc(33% - (var(--fl-gap) * 2)); } |
| .d-fl-col4 | > * { flex-basis: calc(25% - (var(--fl-gap) * 2)); } |
| .d-fl-col5 | > * { flex-basis: calc(20% - (var(--fl-gap) * 2)); } |
| .d-fl-col6 | > * { flex-basis: calc(17% - (var(--fl-gap) * 2)); } |
| .d-fl-col7 | > * { flex-basis: calc(14% - (var(--fl-gap) * 2)); } |
| .d-fl-col8 | > * { flex-basis: calc(13% - (var(--fl-gap) * 2)); } |
| .d-fl-col9 | > * { flex-basis: calc(11% - (var(--fl-gap) * 2)); } |
| .d-fl-col10 | > * { flex-basis: calc(10% - (var(--fl-gap) * 2)); } |
| .d-fl-col11 | > * { flex-basis: calc(9% - (var(--fl-gap) * 2)); } |
| .d-fl-col12 | > * { flex-basis: calc(8% - (var(--fl-gap) * 2)); } |
| .d-flg0 | > * { --fl-gap: 0 !important; } |
| .d-flg1 | > * { --fl-gap: 0.1rem !important; } |
| .d-flg2 | > * { --fl-gap: 0.2rem !important; } |
| .d-flg4 | > * { --fl-gap: 0.4rem !important; } |
| .d-flg6 | > * { --fl-gap: 0.6rem !important; } |
| .d-flg8 | > * { --fl-gap: 0.8rem !important; } |
| .d-flg12 | > * { --fl-gap: 1.2rem !important; } |
| .d-flg16 | > * { --fl-gap: 1.6rem !important; } |
| .d-flg24 | > * { --fl-gap: 2.4rem !important; } |
| .d-flg32 | > * { --fl-gap: 3.2rem !important; } |
| .d-flg48 | > * { --fl-gap: 4.8rem !important; } |
| .d-flg64 | > * { --fl-gap: 6.4rem !important; } |
Creating flex columns
Use d-fl-col{n} to create uniformly sized children within an element.
<div class="d-fl-col1">...</div>
<div class="d-fl-col2">...</div>
<div class="d-fl-col3">...</div>
<div class="d-fl-col4">...</div>
<div class="d-fl-col5">...</div>
<div class="d-fl-col6">...</div>
<div class="d-fl-col7">...</div>
<div class="d-fl-col8">...</div>
<div class="d-fl-col9">...</div>
<div class="d-fl-col10">...</div>
<div class="d-fl-col11">...</div>
<div class="d-fl-col12">...</div>
Flex Column Gaps
Use d-flg{n} to create uniform gaps between flex columns within an element.
<div class="d-fl-col3 d-flg0">...</div>
<div class="d-fl-col3 d-flg1">...</div>
<div class="d-fl-col3 d-flg2">...</div>
<div class="d-fl-col3 d-flg4">...</div>
<div class="d-fl-col3 d-flg6">...</div>
<div class="d-fl-col3 d-flg8">...</div>
<div class="d-fl-col3 d-flg12">...</div>
<div class="d-fl-col3 d-flg16">...</div>
<div class="d-fl-col3 d-flg24">...</div>
<div class="d-fl-col3 d-flg32">...</div>
<div class="d-fl-col3 d-flg48">...</div>
<div class="d-fl-col3 d-flg64">...</div>
Centering objects
By default flexed items align to flex-start both horizontally and vertically (effectively top, left). Use d-fl-center to center-center child items within an element.
<div class="d-fl-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>