Cheat Sheet
🔧 Flexbox Cheat Sheet with Tailwind
📦 Display Flex
| CSS | Tailwind |
|---|
display: flex | flex |
display: inline-flex | inline-flex |
🧭 Flex Direction
| CSS | Tailwind |
|---|
flex-direction: row | flex-row |
flex-direction: row-reverse | flex-row-reverse |
flex-direction: column | flex-col |
flex-direction: column-reverse | flex-col-reverse |
📐 Justify Content
| CSS | Tailwind |
|---|
justify-content: flex-start | justify-start |
justify-content: center | justify-center |
justify-content: flex-end | justify-end |
justify-content: space-between | justify-between |
justify-content: space-around | justify-around |
justify-content: space-evenly | justify-evenly |
📏 Align Items
| CSS | Tailwind |
|---|
align-items: stretch | items-stretch |
align-items: flex-start | items-start |
align-items: center | items-center |
align-items: flex-end | items-end |
align-items: baseline | items-baseline |
🧲 Align Self
| CSS | Tailwind |
|---|
align-self: auto | self-auto |
align-self: flex-start | self-start |
align-self: center | self-center |
align-self: flex-end | self-end |
align-self: stretch | self-stretch |
🔄 Flex Wrap
| CSS | Tailwind |
|---|
flex-wrap: nowrap | flex-nowrap |
flex-wrap: wrap | flex-wrap |
flex-wrap: wrap-reverse | flex-wrap-reverse |
📊 Flex Grow / Shrink / Basis
| CSS | Tailwind |
|---|
flex-grow: 1 | grow |
flex-grow: 0 | grow-0 |
flex-shrink: 1 | shrink |
flex-shrink: 0 | shrink-0 |
flex-basis: 50% | basis-1/2 |
flex: 1 1 auto | flex-1 |
flex: none | flex-none |
🧭 Align Content (multi-line)
| CSS | Tailwind |
|---|
align-content: start | content-start |
align-content: center | content-center |
align-content: end | content-end |
align-content: between | content-between |
align-content: around | content-around |
align-content: evenly | content-evenly |
💡 Tip: Combine these with responsive prefixes like md:flex-row, lg:items-center, etc.