Topic 1 - CSS Flexbox
There are four flexbox layout modes, block, inline, table, and position, each is used for a different element. Block is for sections on the webpage, inline is for text, table is for two dimensional table data, position is for explicit position of an element. The flexbox properties are supported by all modern browsers. To use a flexbox model you need to first define a flexbox container.
Topic 2 - CSS Flexbox Container
The flexbox container becomes flexible by setting the display property to flex. The flex container has six properties which are flex wrap, direction, and flow, along with align items and content, and lastly justify content. All of the properties of flex containers are pretty self explanatory and no one should have a problem with what they are used for.
Topic 3 - CSS Flexbox Items
Flex items are the child to the flex box or what's inside the flexbox, any items inside the flexbox become flexible. The flex item properties are, flex, flex grown, flex shrink, flex basis, order, and align self. The property flex is shorthand for flex grow, flex shrink, and flex basis, which all change the size of the item. Order puts the items in order in the flexbox, align self specifies the alignment of the item.