How deeply does Web Design Playground, Second Edition cover flex?

Defines complete and abbreviated syntax with examples, but stops short of detailing each component’s full behavior.

Flex

As explained in 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.

The CSS flex property is a compact way to set an item’s flex-grow, flex-shrink, and flex-basis values. Think of it as the three-question form for a Flexbox item: may it grow, may it shrink, and what size should it start with? section 12.4

Write the shorthand in several useful forms:

flex: flex-grow flex-shrink flex-basis; section 12.4
flex: flex-grow flex-shrink; or flex: flex-grow flex-basis; section 12.4
flex: flex-grow; or flex: flex-basis; section 12.4

PLAY

Try familiar shorthand combinations: flex: 0 1 auto; flex: 1 0; and flex: 0 0 10em;. Each example sets the item’s flexibility using fewer declarations—CSS doing a little word-saving magic. section 12.4

item {
    flex: flex-grow flex-shrink flex-basis;
    flex: flex-grow flex-shrink;
    flex: flex-grow flex-basis;
    flex: flex-grow;
    flex: flex-basis;
}

Use the syntax listing to compare the complete and abbreviated flex forms at a glance. section 12.4

How Web Design Playground, Second Edition covers it

Cover of Web Design Playground, Second Edition

liveBook manning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionThe CSS flex property is a shorthand that controls a flex item's growth, shrinkage, and base size along the flex container's main axis.
liveBook manning.com

Web Design PlaygroundA CSS shorthand property that sets flex-grow, flex-shrink, and flex-basis together for a flex item.

Compare how 3 books explain flex →

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.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.