We can bunch all the items up in a particular spot (with flex-start, center, and flex-end), or we can spread them apart (with space-between, space-around, and space-evenly).įor the cross axis, things are a bit different. Instead, it's all about the distribution of the group.

When it comes to the primary axis, we don't generally think in terms of aligning a single child. We can change how children are distributed along the primary axis using the justify-content property: We can control whether items grow or shrink, how the extra space is distributed, and more. As the name suggests, Flexbox is all about flexibility. So, what problem does Flexbox solve? Flexbox is all about arranging a group of items in a row or column, and giving us a ridiculous amount of control over the distribution and alignment of those items. Headings and paragraphs stack vertically as blocks, while things like text, links, and images sit inconspicuously within these blocks. The default “Flow” layout is meant to create digital documents it's essentially the Microsoft Word layout algorithm.

This means that, by default, all children will be positioned according to the Flexbox layout algorithm.Įach layout algorithm is designed to solve a specific problem.

When we flip display to flex, we create a “flex formatting context”. The default layout mode is Flow layout, but we can opt in to Flexbox by changing the display property on the parent container:

Each layout mode is its own little sub-language within CSS. Link to this headingIntroduction to FlexboxĬSS is comprised of many different layout algorithms, known officially as “layout modes”.

Display flex align center