Flex-direction
The CSS flex-direction property specifies the main-axis direction and ordering in which flex items are laid out within a flex container.
Web Design Playground, Second Edition
The CSS flex-direction property specifies the direction in which flex items are placed along the main axis of a flex container.
- How it is used
- Chooses a flex container’s main-axis direction before spacing, aligning, wrapping, or sizing its items.
- How deep it goes
- Defines main and cross axes and explains all four direction values through container syntax and visual results.
- Examples
- Demonstrates row and row-reverse layouts, then stacks photo-gallery thumbnails and captions with column.
- What you can do after
- Apply it via CSS to arrange flex items horizontally or vertically and build stacked image-caption layouts.
Read how Web Design Playground, Second Edition explains flex-direction →
Web Design Playground
A CSS flexbox property that sets the direction of the main axis and the order in which flex items flow.
- How it is used
- Sets a flex container’s main-axis direction before arranging items with other flexbox properties.
- How deep it goes
- Defines the main and cross axes, explains all four values, and shows their visible layout effects.
- Examples
- Uses div and header flex containers plus a nested body-and-div portfolio layout.
- What you can do after
- Operate/configure it to make flex items flow horizontally or vertically, including reversed orders.
CSS in Depth, Second Edition
The CSS flex-direction property specifies the main-axis direction and ordering of flex items in a flex container.
- How it is used
- Controls whether flex items flow horizontally, vertically, or in reverse order within a flex container.
- How deep it goes
- Explains axis rotation, nested containers, and height-dependent growth, while deferring broader alignment and spacing options.
- Examples
- Uses a two-column page with a taller main tile and vertically stacked sidebar tiles that must align at the bottom.
- What you can do after
- Apply it via CSS to stack, reverse, or redistribute flex items and to build height-filling nested layouts.
Read how CSS in Depth, Second Edition explains flex-direction →
Related concepts
- flex-flowconfigured by · The CSS flex-flow property is a shorthand that sets a flex container's flex-direction and flex-wrap properties.
- flexboxconfigures · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- main axisconfigures · The main axis is the primary direction in which a flex container arranges and distributes its flex items.
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- rowconfigures · The CSS row flex-direction value lays out flex items along the inline direction.
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.