flex allow the container to alter it's item’s
width/height (and order) to best fill the available space. we define
the container display:flex; it's enables a flex context
for all it's direct children.
justify-content define the alignment along the main axis,
its helps distribute extra free space leftover, when either all the
flex items on line are inflexible. (or are flexible but have reached
their maximum size.)
flex: it's the shorthand for
flex-grow, flex-shrink, and
flex-basis combined. the second and third parameters
(flex-shrink, flex-basis) are optional.
flex-grow It dictates what amount of the available space
inside the flex container the item should take up.
flex-basis This defines the default size of an element
before the remaining space is distributed
flex-shrinkThis defines the ability for a flex item to
shrink if necessary.
