Flex item
A flex item is a child of a flex container that participates in its flexible layout.
Web Design Playground, Second Edition
A flex item is a child element of a flex container that participates in flexible sizing and alignment along the container’s axes.
- How it is used
- Arranges child elements in one-dimensional headers, navigation, sidebars, and small page layouts.
- How deep it goes
- Explains automatic item creation, axes, sizing, order, and alignment through property-level examples.
- Examples
- Demonstrates six child divs, a centered h1, navigation list items, and article-and-aside columns.
- What you can do after
- Apply it via CSS Flexbox to size, reorder, align, and proportionally distribute container children.
Read how Web Design Playground, Second Edition explains flex item →
CSS in Depth, Second Edition
A flex item is a child of a flex container that participates in flexible one-dimensional layout.
- How it is used
- Arranges direct children within a flex container for menus, columns, nested tiles, and aligned text.
- How deep it goes
- Explains item sizing through basis, growth, and shrinkage, then applies alignment and ordering; defers some controls to a reference-style overview.
- Examples
- Uses a spaced navigation menu, unequal-content columns with nested tiles, and a three-part price display.
- What you can do after
- Build it from scratch: identify direct children as items, size and space them, and nest containers when inner tiles must fill a column.
Web Design Playground
A child element participating in a flex formatting context, whose size and position are controlled by flexbox properties.
- How it is used
- Arranges child elements within page components such as navigation, content columns, and footers.
- How deep it goes
- Explains automatic item creation and works through growth, shrinking, basis, ordering, and individual alignment.
- Examples
- Uses navigation list items, a centered heading, article-and-aside columns, a holy-grail layout, and footer content.
- What you can do after
- Apply flexbox properties to size, order, align, and distribute child elements in a container.
Related concepts
- flex containerpart of · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- shrinkused by · Flex shrinking is the Flexbox behavior that reduces flex-item sizes and distributes insufficient space according to shrink factors and size constraints.
- min-width propertyconfigured by · The CSS min-width property specifies the minimum permitted width of an element’s applicable box.
- flex-growused by · The CSS flex-grow property specifies a nonnegative factor determining a flex item’s proportional share of available free space.
- orderconfigured by · The CSS order property specifies the ordinal position of a flex or grid item within its layout container.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.