Summary  
Demonstrates how to apply Flexbox utility classes to implement flexible layouts by enabling flex containers, setting item direction, aligning and justifying items, and adding spacing.

General domain of usage  
Front-end web development (web page layout)

Tailwind provides utility classes to build flexible layouts using Flexbox.



### Enable Flexbox

```jsx
<div className="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
```
`flex`: enables flex layout.



### Direction

```jsx
<div className="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
```
`flex-col`: stacks items vertically.





### Align Items

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

`items-center`: aligns items vertically.



### Justify Content

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

`justify-between`: spreads items horizontally.



### Gap Between Items

```jsx
<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.


Which Tailwind CSS utility class enables Flexbox layout on a container?

Learn how to build and style modern interfaces with Tailwind CSS using utility classes and reusable UI patterns. Apply spacing, colors, layout, responsive rules, and interaction states to create clean React components and prepare for Next.js projects.

Layout with Flexbox

Enable Flexbox

Direction

Align Items

Justify Content

Gap Between Items