Flexbox Utilities

Flexbox Utilities

<!-- Enable flex -->
<div class="d-flex">
<div class="d-inline-flex">

<!-- Direction -->
<div class="d-flex flex-row">           <!-- default -->
<div class="d-flex flex-column">
<div class="d-flex flex-row-reverse">

<!-- Justify content (main axis) -->
<div class="d-flex justify-content-start">
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-end">
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-around">

<!-- Align items (cross axis) -->
<div class="d-flex align-items-start">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">

<!-- Grow and shrink -->
<div class="flex-grow-1">Takes available space</div>
<div class="flex-shrink-0">Never shrinks</div>

<!-- Gap -->
<div class="d-flex gap-3">
<div class="d-flex gap-2 flex-wrap">