Arranging elements¶
This page shows how the display setting controls the way an element and its children are arranged, and how align self and order let you fine-tune a single item.
Try it yourself¶
Change Display to see how the container flows and how it arranges its four items. The container sits inside a line of text, so you can also see how it fits among other content. Align self and order change only the highlighted item, and take effect when Display is flex or grid.
Some text before the container,1234and some text after it.
Display¶
Display decides how an element takes part in the page and how it lays out its own children.
| Value | What it does |
|---|---|
| block | Starts on a new line and takes the full width available. Stacks its children top to bottom. |
| inline | Flows within a line of text, like a word. Width and height have no effect. |
| inline-block | Flows within a line like inline, but you can give it a width and height. |
| flex | Lays its children out in a row (or a column), with control over spacing and alignment. |
| grid | Lays its children out in rows and columns. |
| none | Removes the element and its children from the page. |
Align self¶
Align self sets how one item lines up across its container, overriding the alignment used for the rest of the group. It applies to an item inside a flex or grid layout.
- auto — follow the container's own setting.
- flex-start — line up at the start (top of a row).
- center — line up in the middle.
- flex-end — line up at the end (bottom of a row).
- stretch — fill the container from start to end.
- baseline — line up the text baselines with the other items.
Order¶
Order changes where an item sits among its siblings without moving it in the page structure. Items are placed from the lowest order to the highest, and the default is 0. Set a negative number to move an item earlier, or a higher number to move it later. It applies in flex and grid layouts.
Related notes¶
To control the space between items in a flex or grid layout, see the Gap section on Spacing and layout. To shape a single element, see the Spacing playground.