SherableFlexbox
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
flex-direction
You can change the direction of a row/column at any given breakpoint!
flex-wrap
A property that sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-flow
A property that sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-basis
It sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
justify-content
Aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.
align-items
It sets the default alignment for all of the flex container’s items, including anonymous flex items.
align-self
It allows default alignment to be overridden for individual flex items.
align-content
Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.