CSS Flexbox Tool
1
2
3

Flex Container

Display
Flex
Inline-Flex
Flex-direction
row
column
row-reverse
column-reverse
Flex-wrap
nowrap
wrap
wrap-reverse
Justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
Align-items
stretch
flex-start
center
flex-end
baseline
Align-content
stretch
flex-start
center
flex-end
space-between
space-around
Flex Item
Order:
Flex:
i. flex-grow
This defines the ability for a flex item to grow if necessary. It dictates what amount of the available space inside the flex container the item should take up.
ii. flex-shrink
This defines the ability for a flex item to shrink if necessary. It dictates what amount of the available space inside the flex container the item should take up.
iii. flex-basis
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property".
Align-self:
auto
flex-start
center
flex-end
baseline
stretch
Text:
Font-size:
px
Min Width:
px
Min Height:
px
Center Text:
Get code