Flex Container
A flexbox layout is defined using the flex
or inline-flex
values of the display
property on the parent item. This element then becomes a flex container, and each one of its children becomes a flex item.
A value of flex
causes the element to become a block level flex container, and inline-flex
an inline level flex container. These values create a flex formatting context for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.