Css Flex tags

⬅ Back to Main Page

Main Container-Level Flexbox Properties

align-itemsClick for details
align-contentClick for details

Let's Play with Flexbox!

No complex coding required here, bro! Just click the properties below to instantly arrange your items like a pro.

justify-content:
align-items:
⚡ Item 1
🔥 Item 2
🚀 Item 3

Flex Item-Level Properties

flex-growClick for details
flex-shrinkClick for details
flex-basisClick for details
flex (shorthand)Click for details
align-selfClick for details

Advanced / Modern Flexbox Features

orderClick for details
Nested FlexboxClick for details
gapClick for details
Responsive FlexboxClick for details

Less Common but Powerful

Baseline AlignmentClick for details
flex-basis: auto vs 0Click for details
align-content (advanced)Click for details
order (Accessibility)Click for details