Flex-basis
The CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before available space is distributed.
Web Design Playground
A CSS flexbox property that sets the initial main-size of a flex item before free space is distributed.
- How it is used
- Sets a flex item’s suggested initial main-axis size before available space is handled.
- How deep it goes
- Defines value, auto, and content sizing, then connects flex-basis to flex shorthand and flexible layouts.
- Examples
- Uses a 10em fixed flex shorthand and minimum-width blocks in a wrapping flexible layout.
- What you can do after
- Apply it via CSS flexbox to suggest item sizes and establish minimum block widths.
Web Design Playground, Second Edition
The CSS flex-basis property specifies the initial main-axis size of a flex item before available space is distributed.
- How it is used
- Sets a flex item’s suggested initial main-axis size before available space is distributed.
- How deep it goes
- Explains main-axis sizing, measurement, auto, and content values, plus interaction with grow, shrink, and shorthand.
- Examples
- Uses generic flex-basis syntax and a fixed 10em size within the flex shorthand.
- What you can do after
- Apply it via CSS to suggest a flex item’s starting width or height.
Read how Web Design Playground, Second Edition explains flex-basis →
CSS in Depth, Second Edition
The CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before free-space distribution.
- How it is used
- Sets each flex item’s starting main-axis size before flex-grow and flex-shrink resolve the final layout.
- How deep it goes
- Explains values, auto behavior, width precedence, free-space distribution, overflow, and column-axis effects.
- Examples
- Uses 20% items, two-thirds/one-third columns, percentage bases with gaps, and vertically stacked nested tiles.
- What you can do after
- Apply it via CSS Flexbox to create proportional, fixed, fluid, or vertically distributing layouts.
Tiny CSS Projects
The CSS flex-basis property specifies the initial main-size contribution of a flex item before space is distributed.
- How it is used
- Controls starting sizes within Flexbox layouts for equal groups and responsive side-by-side cards.
- How deep it goes
- Explains starting sizes and interactions with growth, shrinking, and gaps, without descending into layout-engine internals.
- Examples
- Uses equal profile-card likes and a responsive checkout layout with a 250px summary card.
- What you can do after
- Apply flex-basis in CSS to establish proportional or fixed starting sizes for flex items.
Math for Web Design
flex-basis is a CSS Flexbox property that specifies an item's initial size along the flex container's main axis before flexible growth or shrinkage.
- How it is used
- Sets the starting size used to calculate flexible growth, shrinkage, and space distribution in a flex container.
- How deep it goes
- Explains the selection algorithm, width and intrinsic-size fallbacks, shorthand interactions, and the point where grow/shrink calculations begin.
- Examples
- Uses fixed lengths, auto with width, auto with intrinsic content, width overrides, shorthand declarations, and a complete three-item row.
- What you can do after
- Diagnose unexpected flex item sizes by identifying the base size and checking whether shorthand declarations changed it.
Related concepts
- flexconfigured by · The CSS flex property is a shorthand that sets a flex item’s flex-grow, flex-shrink, and flex-basis values.
- JavaScriptconfigured by · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
- widthalternative to · Width is a measure of extent along a specified dimension, such as spatial size or the number of units or features in a model.
- flex base sizeconfigures · A flex base size is the initial main-axis size assigned to a flex item before Flexbox distributes space by growing or shrinking items.
- shrinkused by · Flex shrinking is the Flexbox behavior that reduces flex-item sizes and distributes insufficient space according to shrink factors and size constraints.
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.