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.