Order
The CSS order property specifies the ordinal position of a flex or grid item within its layout container.
Web Design Playground
A CSS flexbox property that determines the visual ordering of flex items within a flex container.
- How it is used
- Changes a flex item’s order when arranging items inside a flex container.
- How deep it goes
- Introduces `order` as a flex-item property and supplies its rule syntax without detailing values or ordering behavior.
- Examples
- Shows the rule pattern `item { order: value; }`.
- What you can do after
- Apply it as a CSS property to change a flex item’s order.
Web Design Playground, Second Edition
The CSS order property specifies the ordering position of a flex item within its flex container.
- How it is used
- Reorders individual flex items within a flex container.
- How deep it goes
- Introduces declaration syntax and illustrates the visual effect of differing order values.
- Examples
- Illustrates different order values with a visual comparison of flex items.
- What you can do after
- Apply it via CSS to change a flex item’s ordering position.
Read how Web Design Playground, Second Edition explains order →
Related concepts
- flex itemconfigures · A flex item is a child of a flex container that participates in its flexible layout.
- CSS source orderuses · CSS source order is the relative ordering of declarations that determines which declaration prevails when competing declarations have equal cascade precedence.
- Order propertykind of · An order property specifies the relative sequence, precedence, or position of elements, events, or operations.
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.