Welcome here! I present you simple sandbox, where is collected all basic properties of Flexbox. You can enable every property and reset it, or reset all enabled properties. Active values of properties is highlighted by gray background. The difference of this sandbox from others is that here you can combine properties and look at the behavior of elements. Just change view to Full Page and enjoy!
justify-content:
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly(reset)
flex-direction:
rowrow-reversecolumncolumn-reverse(reset)
flex-wrap:
nowrapwrapwrap-reverse(reset)
align-content: (working with flex-wrap:wrap;)
flex-startflex-endcenterspace-betweenspace-aroundspace-evenlystretch(reset)
align-items:
flex-startflex-endcenterbaselinestretch(reset)
align-self: (for example, Item 3)
flex-startflex-endcenterbaselinestretch(reset)
flex-grow: (for example, Item 3)
01(reset)
order: (for example, Item 3)
-101(reset)
flex-basis: (for example, Item 3)
10%40%100%(reset)
flex-shrink: (for example, Item 3)
012(reset)