Flex-grow
The CSS flex-grow property specifies a nonnegative factor determining a flex item’s proportional share of available free space.
Web Design Playground, Second Edition
The CSS flex-grow property specifies how much a flex item may expand relative to the other flex items when extra space is available.
- How it is used
- Fills leftover flex-container space for descriptions, page content, columns, and footer-pushing layouts.
- How deep it goes
- Explains default and positive values, equal and proportional sharing, and a simple calculation, without advanced edge cases.
- Examples
- Uses a thumbnail list, a Holy Grail article-and-sidebar layout, and a photo gallery footer.
- What you can do after
- Apply it to distribute leftover space among flex items and make page content fill available room.
Read how Web Design Playground, Second Edition explains flex-grow →
Web Design Playground
A flexbox sizing behavior that allows a flex item to take up available free space.
- How it is used
- Uses flex-grow to make flex items fill available space in page layouts and flexible block groups.
- How deep it goes
- Explains defaults, positive values, equal shares, and proportional calculations, without detailing browser sizing internals.
- Examples
- Uses article-and-sidebar proportions, a full-height footer layout, flexible blocks, and thumbnail lists.
- What you can do after
- Apply it to allocate available space among flex items using equal or proportional positive values.
Math for Web Design
A flex grow factor is the numeric value that determines an item’s proportional share of positive free space in a Flexbox container.
- How it is used
- Distributes leftover main-axis space among flex items to create responsive emphasis and fill underflow.
- How deep it goes
- Derives base sizes, proportional allocations, fractional-factor cases, shorthand interactions, and min/max redistribution.
- Examples
- Works through 600px three-item layouts and a pricing-card layout with a prominent Pro card.
- What you can do after
- Evaluate/understand how grow factors allocate positive free space and diagnose shorthand overrides.
CSS in Depth, Second Edition
The CSS flex-grow property specifies a nonnegative factor that determines how a flex item receives remaining space in its flex container.
- How it is used
- Allocates leftover space among flex items to create proportional, fluid columns and fill constrained layouts.
- How deep it goes
- Explains basis-dependent remainder calculation, weighted allocation, shorthand equivalence, and vertical-axis constraints.
- Examples
- Demonstrates weighted columns, nested vertical tiles, and flexible portfolio images inside grid items.
- What you can do after
- Apply it via CSS to distribute remaining width or constrained height among flex items.
Related concepts
- flexpart of · The CSS flex property is a shorthand that sets a flex item’s flex-grow, flex-shrink, and flex-basis values.
- flexboxused by · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- mainconfigures · The HTML main element identifies the dominant content of a document or application view, excluding shared navigation and peripheral content.
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.