Layout with Flexbox

Tailwind provides utility classes to build flexible layouts using Flexbox.

Enable Flexbox

<div className="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

flex: enables flex layout.

Direction

<div className="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

flex-col: stacks items vertically.

Align Items

<div className="flex items-center">
  <div>Item</div>
</div>

items-center: aligns items vertically.

Justify Content

<div className="flex justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

justify-between: spreads items horizontally.

Gap Between Items

<div className="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

gap-4: adds space between items.

Use Flexbox utilities to control direction, alignment, and spacing in layouts.