Skip to main content

Flex Box Home

Cheat Sheet

🔧 Flexbox Cheat Sheet with Tailwind

📦 Display Flex

CSSTailwind
display: flexflex
display: inline-flexinline-flex

🧭 Flex Direction

CSSTailwind
flex-direction: rowflex-row
flex-direction: row-reverseflex-row-reverse
flex-direction: columnflex-col
flex-direction: column-reverseflex-col-reverse

📐 Justify Content

CSSTailwind
justify-content: flex-startjustify-start
justify-content: centerjustify-center
justify-content: flex-endjustify-end
justify-content: space-betweenjustify-between
justify-content: space-aroundjustify-around
justify-content: space-evenlyjustify-evenly

📏 Align Items

CSSTailwind
align-items: stretchitems-stretch
align-items: flex-startitems-start
align-items: centeritems-center
align-items: flex-enditems-end
align-items: baselineitems-baseline

🧲 Align Self

CSSTailwind
align-self: autoself-auto
align-self: flex-startself-start
align-self: centerself-center
align-self: flex-endself-end
align-self: stretchself-stretch

🔄 Flex Wrap

CSSTailwind
flex-wrap: nowrapflex-nowrap
flex-wrap: wrapflex-wrap
flex-wrap: wrap-reverseflex-wrap-reverse

📊 Flex Grow / Shrink / Basis

CSSTailwind
flex-grow: 1grow
flex-grow: 0grow-0
flex-shrink: 1shrink
flex-shrink: 0shrink-0
flex-basis: 50%basis-1/2
flex: 1 1 autoflex-1
flex: noneflex-none

🧭 Align Content (multi-line)

CSSTailwind
align-content: startcontent-start
align-content: centercontent-center
align-content: endcontent-end
align-content: betweencontent-between
align-content: aroundcontent-around
align-content: evenlycontent-evenly

💡 Tip: Combine these with responsive prefixes like md:flex-row, lg:items-center, etc.