GuideLabGlossary

Creating a flex container

Turn on Flexbox layout with the display CSS property

Create flex containers with display: flex and display: inline-flex.

display: flexdisplay: inline-flexCREATING A FLEX CONTAINER

The contents are laid out with Flexbox, not the element whose display value you changed

It’s the contents of an element with display: flex or display: inline-flex that will be laid out with Flexbox layout — not the element on which you set display. These contents are referred to as flex items, and the element with display: flex or display: inline-flex is referred to as the flex container.

.flex-containerdivdisplay: flexI’ll be laid out with Flexbox

Outer display type of a flex container

display lets you set not just how the contents of an element should be laid out, but also how the element’s box should behave if placed in Flow layout by its ancestor.

.flex-container.flex-containerdisplay: flexdisplay: inline-flexIf I’m put in Flow layout, I want to be block-levelIf I’m put in Flow layout, I want to be inline-level

flex has an outside display type of block.

display: flexdisplay: block flexIS LIKE

inline-flex has an outside display type of inline.

IS LIKEdisplay: inline-flexdisplay: inline flex

Replaced elements can’t lay out their contents with Flexbox

The contents of elements like svg or img can’t be laid out with Flexbox. These elements are so called replaced elements, which means what goes inside their content box is dictated by something else than CSS. You can technically set display: flex or display: inline-flex on an svg element, but its contents will not be treated as flex items.

imgimgI’m still a regular box that can be laid out with any layout typeBut the contents of my content box get replaced with an image

Initial CSS property values for Flexbox-related properties

Remember that the browser calculates a computed value of every single CSS property for every single element node in the DOM tree. Every CSS property starts with an initial value, so there’s always a value even if you don’t set one explicitly. Some CSS properties apply only when Flexbox layout is applied. For example, flex-basis or flex-grow. So when you change display and turn on Flexbox for an element’s contents, all these property values will start having an effect.

flex-direction: rowflex-basis: autoflex-grow: 0flex-shrink: 1flex-wrap: nowrapFlexbox-related properties start with these initial valuesIf these are what you want, you don’t need to set them explicitly!

Change the display of the container element, not the element whose box you want to grow or shrink

Don’t set display: flex on the element you want to grow or shrink. Set it on the element that contains this element instead.

I’ll be laid out with FlexboxI’ll be the flex containerdisplay: flexdisplay: inlinePlay Songbuttonspan"Play Song"

Escaping Flexbox layout

Can a child element avoid being laid out with Flexbox if a parent element has display: flex? Yes, with position: absolute and position: fixed. These elements are considered out-of-flow, as in their boxes are not considered flex items.

Flex containerbodyposition: absolute