Layouts

Display

Utilities for sets the display box type of an element.

Class

Usage

Set a block element that starts on a new line and takes up the full width.

<!-- Example -->
<span class="block">
  ...
</span>

Set the completely removed element.

<!-- Example -->
<y class="block">
  ...
</y>
<y class="hidden">
  ...
</y>
<y class="block">
  ...
</y>

Set an element as an inline. Any height and width properties will have no effect.

<!-- Example -->
<y class="inline-block">
  ...
</y>

Set an element as a block-level flex container.

<!-- Example -->
<y class="flex">
  <y> ... </y>
  <y> ... </y>
</y>

Set an element as an inline-level flex container.

<!-- Example -->
<y class="inline-flex">
  <y> ... </y>
  <y> ... </y>
</y>

Set a complete set of table with table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities.

<!-- Example -->
<y class="table w-full">
  <y class="table-row-group">
    <y class="table-row">
      <y class="table-cell">
        ...
      </y>
      <y class="table-cell">
        ...
      </y>
    </y>
    <y class="table-row">
      <y class="table-cell">
        ...
      </y>
      <y class="table-cell">
        ...
      </y>
    </y>
  </y>
</y>

Variant