Menu
Flex direction
Values Shortcuts
row .row
row-reverse .row-rev
column .col-v
column-reverse .col-v-rev
Flex wrap & shrink
Property: Value Shortcuts
flex: 1 .flex-grow
flex-wrap: nowrap .flex-nowrap
flex-wrap: wrap .flex-wrap
flex-wrap: wrap-reverse .flex-wrap-rev
flex-shrink: 1 .flex-shrink
Justify content
Values Shortcuts
space-around .justify-around
space-between .justify-between
center .justify-center
space-evenly .justify-evenly
start .justify-start
end .justify-end
Align items
Values Shortcuts
baseline .items-baseline
center .items-center
start .items-start
end .items-end
stretch .items-stretch
unset .items-unset
Align self
Values Shortcuts
baseline .self-baseline
center .self-center
start .self-start
end .self-end
stretch .self-stretch
unset .self-unset
Flex patterns
Property: Value Shortcuts
display: flex; align-items: center
justify-content: space-around
flex-wrap: wrap; gap: 1rem		 .flex-around
display: flex; align-items: center
justify-content: space-between
flex-wrap: wrap; gap: 1rem		 .flex-between
display: flex; align-items: center
justify-content: space-evenly
flex-wrap: wrap; gap: 1rem		 .flex-evenly
display: flex; align-items: center
justify-content: center
flex-wrap: wrap; gap: 1rem		 .flex-center
display: flex; align-items: center
justify-content: start
flex-wrap: wrap; gap: 1rem		 .flex-start
display: flex; align-items: center
justify-content: end
flex-wrap: wrap; gap: 1rem		 .flex-end
Flex gap
Property: Value Shortcuts
gap: 0 .gap-0
gap: 1 .gap-1
gap: 2 .gap-2
gap: 3 .gap-3
gap: 4 .gap-4
gap: 5 .gap-5
gap: .5rem .gap-n-5
gap: .25rem .gap-n-25
gap: .75rem .gap-n-75