Flexbox in CSS

Chapter 2. Flex Container

The first important notion to fully understand is that of flex container, also known as container box. The element on which display: flex or display: inline-flex is applied becomes a flex formatting context for the containing box’s children, known as the flex container. Once we have created a flex container (by adding a display: flex or display: inline-flex), we need to learn how to manipulate the layout of the container’s children.

The children of this container box are flex items, whether they are DOM nodes, text nodes, or generated content. Absolutely positioned children of flex containers are also flex items, but they are sized and positioned as though they are the only flex item in the flex container.

We will first learn all about the CSS properties that apply to the flex container, including several properties impacting the layout of flex items. Flex items themselves are a major concept you need to grok and will be covered in full in Chapter 3.

Flex Container Properties

The display property examples in Figure 1-6 show three flex items side by side, going from left to right, on one line. With a few additional property value declarations, we could have centered the items, aligned them to the bottom of the container, rearranged their order of appearance, and laid them out from left to right or from top to bottom. We could even have made them span a few lines.

Sometimes we’ll have one flex item, sometimes we’ll have dozens. Sometimes we’ll know how ...