Display
Controlling the element's inner and outer display types.
Overview
Basic usage
Block & Inline
Use block
, inline
, and inline-block
to set the flow of elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
display:block
Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,
display:inline
nec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes,
display:inline-block
nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.
<div> Lorem ipsum dolor sit amet… <span class="block"> display:block </span> Nulla et elit dictum, tempor augue quis, … <span class="inline"> display:inline </span> nec malesuada tellus posuere id. … <span class="inline-block"> display:inline-block </span> nascetur ridiculus mus. …</div>
Flex
Use flex
to create a block-level flex container.
Front-end needs a revolution
<div class="flex gap:12 ai:center"> <img src="…"> <div> <div>aron</div> <p>Front-end needs a revolution</p> </div></div>
Inline Flex
Use inline-flex
to create an inline-level flex container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,
aronnec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. … <div class="inline-flex ai:baseline mx:12"> <img src="…"> <div>Aron</div> </div> nec malesuada tellus posuere id. …</div>
Grid
Use grid
to create a block-level grid container.
<div class="grid grid-template-cols:repeat(2,auto) gap:12"> <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-cols:repeat(2,auto) gap:12"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div><div class="inline-grid grid-template-cols:repeat(2,auto) gap:12"> <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:slate-92"> <div class="table-row"> <div class="table-cell">Product</div> <div class="table-cell">Qty</div> <div class="table-cell">Pirce</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:slate-92"> <div class="table-row"> <div class="table-cell">Total</div> <div class="table-cell t:center">10</div> <div class="table-cell t:center">40.00</div> </div> </div></div>
Contents
Use contents
to make the element’s children like direct children of the element’s parent, ignoring the element itself.
<div class="flex gap:20"> <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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Use `flow-root` to clear floats.
<div class="flow-root"> <img class="float:left" …/> <p>Lorem ipsum dolor sit amet… </p></div>Use flow-root to clear floats
List 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:20"> <div>01</div> <div class="hidden">02</div> <div>03</div></div>
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="display:block:hover display:block@sm display:block@dark display:block@print">…</div>