Layout

Display

Can I use ?Can I use ?
classproperties
display:type / d:typedisplay: type
hidden / hidedisplay: none
flexdisplay: flex
griddisplay: grid
inlinedisplay: inline
blockdisplay: block
tabledisplay: table
contentsdisplay: contents
inline-blockdisplay: inline-block
inline-flexdisplay: inline-flex
inline-griddisplay: inline-grid
inline-tabledisplay: inline-table
table-celldisplay: table-cell
table-captiondisplay: table-caption
flow-rootdisplay: flow-root
list-itemdisplay: list-item
table-rowdisplay: table-row
table-columndisplay: table-column
table-row-groupdisplay: table-row-group
table-column-groupdisplay: table-column-group
table-header-groupdisplay: table-header-group
table-footer-groupdisplay: table-footer-group

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="">
1
2
3
4
5
<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="">
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.

Sushi

Sushi

Sushi

Keep up with the latest technological trends, he will greatly improve Web interaction and execution efficiency.
<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="">
1
2
3
4
5
6
<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.

<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.


© Aoyue Design LLC.
關於此頁的問題
編輯自AronLola