Flex
The CSS flex property is a shorthand that sets a flex item’s flex-grow, flex-shrink, and flex-basis values.
Web Design Playground, Second Edition
The CSS flex property is a shorthand for setting an item’s flex-grow, flex-shrink, and flex-basis values.
- How it is used
- Sets how Flexbox items grow, shrink, and establish an initial size through one shorthand property.
- How deep it goes
- Defines complete and abbreviated syntax with examples, but stops short of detailing each component’s full behavior.
- Examples
- Shows flex: 0 1 auto;, flex: 1 0;, and flex: 0 0 10em; as shorthand examples.
- What you can do after
- Apply via CSS shorthand to configure a Flexbox item’s growth, shrinkage, and starting size.
Read how Web Design Playground, Second Edition explains flex →
CSS in Depth, Second Edition
The CSS flex property is a shorthand that controls a flex item's growth, shrinkage, and base size along the flex container's main axis.
- How it is used
- Controls flex-item sizing to divide page layouts into proportional, fixed, fluid, or reusable grid columns.
- How deep it goes
- Explains shorthand components, default values, remainder distribution, and proportional growth through a two-column example.
- Examples
- Uses a primary-content and sidebar layout, proportional columns, fixed and fluid columns, grid systems, and a Holy Grail layout.
- What you can do after
- Build it from scratch by assigning proportional, fixed, or fluid flex-item sizes within a flex container.
Web Design Playground
A CSS shorthand property that sets flex-grow, flex-shrink, and flex-basis together for a flex item.
- How it is used
- Controls a flex item's growth, shrinkage, and initial size within a flexbox layout.
- How deep it goes
- Defines shorthand forms and connects them to growth, shrinkage, and basis, but does not detail their full algorithms.
- Examples
- Uses flex: 0 1 auto;, flex: 1 0;, and flex: 0 0 10em; as shorthand examples.
- What you can do after
- Apply it via CSS to tune how flex items share available space.
Related concepts
- shrinkconfigures · Flex shrinking is the Flexbox behavior that reduces flex-item sizes and distributes insufficient space according to shrink factors and size constraints.
- flex-growconfigures · The CSS flex-grow property specifies a nonnegative factor determining a flex item’s proportional share of available free space.
- flex-basisconfigures · The CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before available space is distributed.
- flexboxpart of · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- flex itemconfigures · A flex item is a child of a flex container that participates in its flexible layout.
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.