block

Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width.

• class: dsp:blk
• css: display: block;

contents

Makes the container disappear, making the child elements children of the element the next level up in the DOM.

• class: dsp:ct
• css: display: contents;

flex

Displays an element as a block-level flex container.

• class: dsp:fx
• css: display: flex;
•   display: -webkit-flex;

flexbox

Displays an element as a block-level flexbox container.

• class: dsp:fxbx
• css: display: flexbox;
•   display: -ms-flexbox;

flow root

The element generates a block container box, and lays out its contents using flow layout.

• class: dsp:flw-rt
• css: display: flow-root;

grid

Displays an element as a block-level grid container.

• class: dsp:grd
• css: display: grid;
•   display: -moz-grid;
•   display: -ms-grid;

inline

Displays an element as an inline element (like <span>). Any height and width properties will have no effect.

• class: dsp:inln
• css: display: inline;

inline block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.

• class: dsp:inln-blk
• css: display: inline-block;

inline-flex

Displays an element as an inline-level flex container.

• class: dsp:inln-fx
• css: display: inline-flex;
•   display: -webkit-inline-flex;

inline-flexbox

Displays an element as an inline-level flex container.

• class: dsp:inln-fxbx
• css: display: inline-flexbox;
•   display: -ms-inline-flexbox;

inline-grid

Displays an element as an inline-level grid container.

• class: dsp:inln-grd
• css: display: inline-grid;
•   display: -moz-inline-grid;
•   display: -ms-inline-grid;

inline-table

The element is displayed as an inline-level table.

• class: dsp:inln-tbl
• css: display: inline-table;

list-item

Let the element behave like a <li> element.

• class: dsp:lst-itm
• css: display: list-item;

none

The element is completely removed.

• class: dsp:none
• css: display: none;

table

Let the element behave like a <table> element.

• class: dsp:tbl
• css: display: table;

table caption

Let the element behave like a <caption> element.

• class: dsp:tbl-cap
• css: display: table-caption;

table cell

Let the element behave like a <td> element.

• class: dsp:tbl-cell
• css: display: table-cell;

table column

Let the element behave like a <col> element.

• class: dsp:tbl-col
• css: display: table-column;

table column group

Let the element behave like a <colgroup> element.

• class: dsp:tbl-col-grp
• css: display: table-column-group;

table footer group

Let the element behave like a <tfoot> element.

• class: dsp:tbl-ftr-grp
• css: display: table-footer-group;

table header group

Let the element behave like a <thead> element.

• class: dsp:tbl-hdr-grp
• css: display: table-header-group;

table row

Let the element behave like a <tr> element.

• class: dsp:tbl-row
• css: display: table-row;

table row group

Let the element behave like a <tbody> element.

• class: dsp:tbl-row-grp
• css: display: table-row-group;

hidden

The content is invisible but still occupies the space on the page.

• class: dsp:hidden
• css: visibility: hidden;

Abbreviations

Supported media

Notes

All display classes begin with “dsp” and are separated by a colon from it’s value. See the flexbox framework for display options.