Display
Overview
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Block & Inline
<div class="">block
block
block
<div class="flex ...">
<div class="block p:20">
<code class="...">block</code>
</div>
<div class="block p:20">
<code class="...">block</code>
</div>
<div class="block p:20">
<code class="...">block</code>
</div>
</div>Flex
For more information, visit Flex.
<div class=""><div class="flex gap:10 w:full ...">
<div class="..."> 1 </div>
<div class="..."> 2 </div>
<div class="..."> 3 </div>
<div class="..."> 4 </div>
<div class="..."> 5 </div>
</div>Inline Flex
<div class="">
Sushi
Sushi
Sushi
<div class="flex flex:wrap justify-content:center">
Ladies and gentlemen, the first Virtual CSS came to the world. It will crush all CSS and UI libraries,
and subvert your understanding of traditional CSS technology.
<div class="inline-flex align-items:center py:10 px:15">
<img src="/images/foods/sushi.jpg" class="w:30 h:30 object:cover round mx:10">
<p>Sushi</p>
</div>
<div class="inline-flex align-items:center py:10 px:15">
<img src="/images/foods/sushi.jpg" class="w:30 h:30 object:cover round mx:10">
<p>Sushi</p>
</div>
<div class="inline-flex align-items:center py:10 px:15">
<img src="/images/foods/sushi.jpg" class="w:30 h:30 object:cover round mx:10">
<p>Sushi</p>
</div>
Keep up with the latest technological trends,
he will greatly improve Web interaction and execution efficiency.
</div>Grid
For more information, visit Grid.
<div class=""><div class="d:grid grid-cols:3 ...">
<div class="..."> 1 </div>
<div class="..."> 2 </div>
<div class="..."> 3 </div>
<div class="..."> 4 </div>
<div class="..."> 5 </div>
<div class="..."> 6 </div>
</div>Applying with functions
<div class="display:$(value)">...</div>Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.
You can also use calc(expression), env(expression) and other CSS functions if the property supports it.
To learn more, see the Functions documentation.
Conditionally apply
States and selectors
<div class="display:block:hover">...</div>Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.
To learn more, see the Selectors documentation.
Responsive breakpoints
<div class="display:block@sm">...</div>Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.
To learn more, see the Breakpoints documentation.
Print format and media queries
<div class="display:block@print">...</div>Master supports media types like print, screen, speech, all, and other media queries.
To learn more, see the Media Queries documentation.
Dark mode and color schemes
<div class="display:block@dark">...</div>Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.
To learn more, see the Color Schemes documentation.
