Flexbox

The flexbox is one method we can use to start to create dynamic (flexible) layouts, grids, and compositions on our web pages. A flexbox has two basic parts: the flex container and flex items. We can turn any element into a flex container by giving it the property:

display:flex;

Any elements contained within this element (its children) will be considered flex items. Flex items can also be given display:flex; and will become flex containers themselves, allowing us to nest dynamic containers within dynamic containers.

For the purpose of this tutorial, we'll be focusing on the flex container and we'll be referencing this guide:


After having gone through that guide, let's practice by trying to recreate this image using flexbox.