Tailwind CSS
/Beginner
Justify Content
Definition
Utilities for controlling how flex and grid items are positioned along a container's main axis.
Explain Like I'm New
If your flexbox is a horizontal row, `justify` controls the Left-to-Right spacing. Do you want items bunched up on the left? Centered? Pushed to opposite edges? This is the tool.
Real World Example
Creating a classic header layout. You use `justify-between` to stick the Logo to the absolute left edge, and the Profile Picture to the absolute right edge.
Common Use Cases
- •Spacing out nav elements
- •Horizontal centering
Interactive Example
Interview Questions
basic
- What Tailwind class pushes one item to the far left and the other item to the far right?
intermediate
- If your flex container is set to `flex-col` (a vertical column), does `justify-center` center items horizontally or vertically?