CSS Flexbox Properties - Quick Reference Guide
Property Used In Purpose
display Flex container Defines flex container (flex, inline-flex).
flex-direction Flex container Sets direction (row, column, row-reverse, column-reverse
justify-content Flex container Aligns items horizontally (start, center, end, space-betwee
align-items Flex container Aligns items vertically (stretch, center, start, end, baseline
align-self Flex items Aligns a single item (auto, flex-start, flex-end, center, base
align-content Flex container Aligns rows in multi-line flex containers.
flex-wrap Flex container Determines whether items wrap (nowrap, wrap, wrap-reve
flex-flow Flex container Shorthand for flex-direction and flex-wrap.
flex Flex items Shorthand for flex-grow, flex-shrink, and flex-basis.
flex-grow Flex items Defines how much an item grows relative to others.
flex-shrink Flex items Defines how much an item shrinks relative to others.
flex-basis Flex items Defines the initial size of an item before flex-grow or shrin
order Flex items Controls the order of items (lower values appear first).
gap Flex container Sets spacing between flex items.
row-gap Flex container Defines the gap between rows.
column-gap Flex container Defines the gap between columns.
