3 min read
•Question 3 of 38easyHow to use Flexbox in Tailwind CSS?
Flexbox utilities for layout.
What You'll Learn
- Flex container classes
- Alignment utilities
- Common patterns
Basic Flexbox
index.htmlHTML
<div class="flex items-center justify-between">
<span>Left</span>
<span>Right</span>
</div>Direction & Wrap
index.htmlHTML
<div class="flex flex-col md:flex-row flex-wrap">
<!-- Column on mobile, row on desktop -->
</div>Common Utilities
| Class | CSS |
|---|---|
| flex | display: flex |
| flex-row | flex-direction: row |
| flex-col | flex-direction: column |
| items-center | align-items: center |
| justify-between | justify-content: space-between |
| gap-4 | gap: 1rem |
Centering Content
index.htmlHTML
<div class="flex items-center justify-center h-screen">
<span>Perfectly centered</span>
</div>