Flex
Quickly manage the layout,alignment,and sizing of grid columns,navigation,components,and more with a full suite of responsive flexbox utilities.
Enable Flex
Apply display utilities to create a flexbox container and transform direct children elements into flex items.
<div class="d-flex pd-10 bg-gray-200">I'm a flexbox container!</div>Direction
Set the direction of flex items in a flex container with direction utilities.
<div class="d-flex flex-row bg-gray-200 mg-b-20">
<div class="pd-10 bg-gray-300">Flex item 1</div>
<div class="pd-10 bg-gray-400">Flex item 2</div>
<div class="pd-10 bg-gray-500">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-gray-200">
<div class="pd-10 bg-gray-300">Flex item 1</div>
<div class="pd-10 bg-gray-400">Flex item 2</div>
<div class="pd-10 bg-gray-500">Flex item 3</div>
</div>Justify Content
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>Align Items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-stretch">...</div>Align Self
Use align-self utilities on flexbox items to individually change their alignment on the cross axis
<div class="d-flex flex-row bg-gray-200 ht-100 mg-b-20">
<div class="pd-10 bg-gray-300 align-self-start">Flex item 1</div>
<div class="pd-10 bg-gray-400 align-self-center">Flex item 2</div>
<div class="pd-10 bg-gray-500 align-self-end">Flex item 3</div>
<div class="pd-10 bg-gray-400 align-self-stretch">Flex item 4</div>
</div>Fill
Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content
<div class="d-flex bg-gray-200">
<div class="pd-10 bg-gray-300 flex-fill">Flex item with a lot of content</div>
<div class="pd-10 bg-gray-400 flex-fill">Flex item</div>
<div class="pd-10 bg-gray-500 flex-fill">Flex item</div>
</div>Grow & Shrink
Use .flex-grow utilities to toggle a flex item’s ability to grow to fill available space.
<div class="d-flex bg-gray-200">
<div class="pd-10 bg-gray-300 flex-grow-1">Flex item</div>
<div class="pd-10 bg-gray-400">Flex item</div>
<div class="pd-10 bg-gray-500">Third flex item</div>
</div>Auto Margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
<div class="d-flex bg-gray-200">
<div class="pd-10 bg-gray-300 flex-grow-1">Flex item</div>
<div class="pd-10 bg-gray-400">Flex item</div>
<div class="pd-10 bg-gray-500 mg-l-auto">Third flex item</div>
</div>Order
Change the visual order of specific flex items with a handful of order utilities.
<div class="d-flex bg-gray-200">
<div class="pd-10 bg-gray-300 order-3">First Item</div>
<div class="pd-10 bg-gray-400 order-2">Second Item</div>
<div class="pd-10 bg-gray-500 order-1">Third Item</div>
</div>