Columns & Layouts
Utilities for flex columns and common flex layouts.
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 d-cg8">...</div>
<div class="d-fl-col3 d-cg8">...</div>
<div class="d-fl-col4 d-cg8">...</div>
<div class="d-fl-col5 d-cg8">...</div>
<div class="d-fl-col6 d-cg8">...</div>
<div class="d-fl-col7 d-cg8">...</div>
<div class="d-fl-col8 d-cg8">...</div>
<div class="d-fl-col9 d-cg8">...</div>
<div class="d-fl-col10 d-cg8">...</div>
<div class="d-fl-col11 d-cg8">...</div>
<div class="d-fl-col12 d-cg8">...</div>
Flex Column Gaps
Use d-cg{n} to create uniform gaps between flex columns within an element.
<div class="d-fl-col3 d-cg0">...</div>
<div class="d-fl-col3 d-cg1">...</div>
<div class="d-fl-col3 d-cg2">...</div>
<div class="d-fl-col3 d-cg4">...</div>
<div class="d-fl-col3 d-cg6">...</div>
<div class="d-fl-col3 d-cg8">...</div>
<div class="d-fl-col3 d-cg12">...</div>
<div class="d-fl-col3 d-cg16">...</div>
<div class="d-fl-col3 d-cg24">...</div>
<div class="d-fl-col3 d-cg32">...</div>
<div class="d-fl-col3 d-cg48">...</div>
<div class="d-fl-col3 d-cg64">...</div>
Centering Objects
This used to be accomplished with d-fl-center, which is deprecated in favor of using Stack.
By default flexed items align to flex-start both horizontally and vertically (effectively top, left). Combine Stack's align and justify utilities to center-center child items within an element.
<dt-stack direction="row" align="center" justify="center">
<div>1</div>
<div>2</div>
<div>3</div>
</dt-stack>