.block
|
display: block;
|
.contents
|
display: contents;
|
.flex
|
display: flex;
|
.flex-root
|
display: flex-root;
|
.grid
|
display: grid;
|
.inherit
|
display: inherit;
|
.initial
|
display: initial;
|
.inline
|
display: inline;
|
.inline-block
|
display: inline-block;
|
.inline-flex
|
display: inline-flex;
|
.inline-grid
|
display: inline-grid;
|
.inline-table
|
display: inline-table;
|
.list-item
|
display: list-item;
|
.none
|
display: none;
|
.revert
|
display: revert;
|
.table
|
display: table;
|
.table-caption
|
display: table-caption;
|
.table-cell
|
display: table-cell;
|
.table-column
|
display: table-column;
|
.table-column-group
|
display: table-column-group;
|
.table-footer-group
|
display: table-footer-group;
|
.table-header-group
|
display: table-header-group;
|
.table-row
|
display: table-row;
|
.table-row-group
|
display: table-row-group;
|
.unset
|
display: unset;
|
.-webkit-box
|
display: -webkit-box;
|
.-webkit-inline-box
|
display: -webkit-inline-box;
|
Class display mudah digunakan, karna hanya nilai display-nya sama dengan nama classnya, misal
display: block;
class
.block. Begitu pun dengan display lainnya.
Berikut ini beberapa contoh sederhana penggunaan class display.
<div class="block bg-teal-500 mb-0.5 p-0.5 radius-t-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="block bg-cyan-500 mb-0.5 p-0.5">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="block bg-blue-500 mb-0.5 p-0.5">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="block bg-indigo-500 mb-0.5 p-0.5">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>Bagaimana, sangat mudah bukan? Oke, kami kasi dua contoh lagi.
Contoh dengan display
inline
<div class="inline bg-indigo-500">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="inline bg-cyan-500">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="inline bg-blue-500">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
Contoh dengan display
inline-block
<div class="text-center">
<div class="inline-block bg-orange-500 m-0.3 p-0.5">Hello World!</div>
<div class="inline-block bg-green-500 m-0.3 p-0.5">Hello World!</div>
<div class="inline-block bg-red-500 m-0.3 p-0.5">Hello World!</div>
</div>