display
Controlling the element's inner and outer display types.
Overview
| Class | Declarations |
|---|---|
hidden | display: none;
|
flex | display: flex;
|
grid | display: grid;
|
inline | display: inline;
|
block | display: block;
|
table | display: table;
|
contents | display: contents;
|
flow-root | display: flow-root;
|
list-item | display: list-item;
|
inline-block | display: inline-block;
|
inline-flex | display: inline-flex;
|
inline-grid | display: inline-grid;
|
inline-table | display: inline-table;
|
table-cell | display: table-cell;
|
table-caption | display: table-caption;
|
table-row | display: table-row;
|
table-column | display: table-column;
|
table-row-group | display: table-row-group;
|
table-column-group | display: table-column-group;
|
table-header-group | display: table-header-group;
|
table-footer-group | display: table-footer-group;
|
display:<type> | display: <type>;
|
Basic usage
Block & Inline
Use block, inline, and inline-block to set the flow of elements.
Block elements start on a new line and take the available width.
display:block
Inline elements stay in the same text flow and only occupy the space they need.
display:inline
Inline-block elements stay inline but can accept box dimensions.
display:inline-block
Use the display mode that matches the element's role in the flow.
<div> Block elements start on a new line. <span class="block"> display:block </span> Inline elements stay in text flow. <span class="inline"> display:inline </span> Inline-block elements accept dimensions. <span class="inline-block"> display:inline-block </span> Choose the display mode for the layout.</div>Flex
Use flex to create a block-level flex container.
CSS needs a revolution
<div class="flex gap:3x align-items:center"> <img src="..."> <div> <div>aron</div> <p>CSS needs a revolution</p> </div></div>Inline Flex
Use inline-flex to create an inline-level flex container.
Inline flex is useful when an inline phrase needs aligned children. The element still participates in text flow while its contents use flex alignment.
aronThis keeps the badge baseline-aligned with the surrounding sentence.
<div> Inline flex keeps this badge in the text flow. <div class="inline-flex align-items:baseline mx:3x"> <img src="..."> <div>Aron</div> </div> The surrounding sentence continues after it.</div>Grid
Use grid to create a block-level grid container.
<div class="grid grid-template-columns:repeat(2,auto) gap:3x"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Inline Grid
Use inline-grid to create a inline-level grid container.
<div class="inline-grid grid-template-columns:repeat(2,auto) gap:3x"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div><div class="inline-grid grid-template-columns:repeat(2,auto) gap:3x"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Table
Use table, table-row, table-column, table-cell, table-caption, table-row-group, table-column-group, table-header-group, and table-footer-group to create elements that behave like their respective table elements.
<div class="table"> <div class="table-caption">Orders</div> <div class="table-header-group bg:gray-90"> <div class="table-row"> <div class="table-cell">Product</div> <div class="table-cell">Qty</div> <div class="table-cell">Price</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell">Milk</div> <div class="table-cell">2</div> <div class="table-cell">10.00</div> </div> <div class="table-row"> <div class="table-cell">Cola</div> <div class="table-cell">3</div> <div class="table-cell">12.00</div> </div> <div class="table-row"> <div class="table-cell">Juice</div> <div class="table-cell">5</div> <div class="table-cell">18.00</div> </div> </div> <div class="table-footer-group bg:gray-90"> <div class="table-row"> <div class="table-cell">Total</div> <div class="table-cell text-center">10</div> <div class="table-cell text-center">40.00</div> </div> </div></div>Contents
Use contents to make the element's children behave like direct children of the element's parent, ignoring the element itself.
<div class="flex gap:5x"> <div class="flex:1">01</div> <div class="contents"> <div class="flex:1">02</div> <div class="flex:1">03</div> </div> <div class="flex:1">04</div></div>Flow Root
Use flow-root to create a block-level element that establishes a new block formatting context.
The paragraph wraps around the floated image because the parent establishes a new formatting context.
Use `flow-root` to clear floats.
<div class="flow-root"> <img class="float:left" .../> <p>The paragraph wraps around the floated image.</p></div>Use flow-root to clear floatsList Item
Use list-item to create a block that behave like a list item.
<div> <div class="list-item">01</div> <div class="list-item">02</div> <div class="list-item">03</div></div>Hidden
Use hidden to hide the element. The element is not rendered in the document.
<div class="flex gap:5x"> <div>01</div> <div class="hidden">02</div> <div>03</div></div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="display:block:hover display:block@sm display:block@dark display:block@print">...</div>