Display
Control box display and behaviour
Prerequisites and tips
- Familiarity with CSS layout techniques: Introduction to CSS layout
- Familiarity with normal flow of how browsers layout by default.
- Understand the difference between block and inline layout in normal flow
- Read more about the display property.
How to use
Place the utility class, either the short or the more verbose, on the element to change its behaviour. The flex classes affect both element (parent) and content (child elements). This is not an exhaustive list of possible display properties, the most common ones.
| Classes | Delcaration | Usage |
|---|---|---|
| flexdisplay-flex | display: flex |
To make the element into a flex parent. |
| dbdisplay-block | display: block |
To make an inline element into a block element. |
| didisplay-inline | display: inline |
To make a block element into an inline element. |
| difdisplay-inlineflex | display: inline-flex |
To make an element into an inline element while also making it into a flex parent. Recommended over inline-block. |
| dibdisplay-inlineblock | display: inline-block |
To make an element into an inline element while keeping some block behaviour. Not recommended because of its imprecise nature and need for additional vertical align properties. Still available in case you really, really need it. |
| dndisplay-none | display: none |
To hide the element visually and from screen readers. |
| vis-hidevisibility-hidden | visibility: hidden |
The element box is not visible, but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus. To both hide an element and remove it from the document layout, use dn instead. |
| screen-reader-text | Not a display property in its own right, it hides the element visually but not from screen readers. If the item is focusable, it’s made visible when in focus. |