📪Display

.block

Sets the display property to block, making the element a block-level element. It takes up the full width available and starts on a new line.

CSS equivalent: display: block;

Example usage:

<div class="block">This element is displayed as a block.</div>

.inline-block

Sets the display property to inline-block, making the element an inline-level block container. It takes up only as much width as necessary and allows other elements to be placed next to it.

CSS equivalent: display: inline-block;

Example usage:

<div class="inline-block">This element is displayed as an inline block.</div>

.inline

Sets the display property to inline, making the element an inline-level element. It takes up only as much width as necessary and allows other elements to be placed next to it.

CSS equivalent: display: inline;

Example usage:

<span class="inline">This element is displayed inline.</span>

.hidden

Sets the display property to none, hiding the element from the page layout. The element will not be rendered and will not take up any space.

CSS equivalent: display: none;

Example usage:

<div class="hidden">This element is hidden.</div>

.grid

Sets the display property to grid, making the element a grid container. It creates a grid layout where child elements can be placed in rows and columns.

CSS equivalent: display: grid;

Example usage:

<div class="grid">This element is displayed as a grid container.</div>

.inline-grid

Sets the display property to inline-grid, making the element an inline-level grid container. It enables grid layout for its child elements while allowing the element to flow inline with surrounding content.

CSS equivalent: display: inline-grid;

Example usage:

<div class="inline-grid">This element is displayed as an inline grid container.</div>

.flex

Sets the display property to flex, making the element a flex container. It enables flexible box layout for its child elements, allowing them to be easily aligned and rearranged.

CSS equivalent: display: flex;

Example usage:

<div class="flex">This element is displayed as a flex container.</div>

.inline-flex

Sets the display property to inline-flex, making the element an inline-level flex container. It enables flexible box layout for its child elements while allowing other elements to be placed next to it.

CSS equivalent: display: inline-flex;

Example usage:

<div class="inline-flex">This element is displayed as an inline flex container.</div>

.table

Sets the display property to table, making the element a table. This allows child elements to behave as table components such as rows and cells.

CSS equivalent: display: table;

Example usage:

<div class="table">This element is displayed as a table.</div>

.inline-table

Sets the display property to inline-table, making the element as an inline-level table. It allows the element to flow within the content while still behaving like a table.

CSS equivalent: display: inline-table;

Example usage:

<div class="inline-table">This element is displayed as an inline table.</div>

.table-caption

Sets the display property to table-caption, making the element behave as a caption for a table.

CSS equivalent: display: table-caption;

Example usage:

<div class="table">
  <div class="table-caption">Table Caption</div>
</div>

.table-column

Sets the display property to table-column, making the element behave as a column within a table.

CSS equivalent: display: table-column;

Example usage:

<div class="table">
  <div class="table-column">Column 1</div>
  <div class="table-column">Column 2</div>
</div>

.table-row

Sets the display property to table-row, making the element behave as a row within a table.

CSS equivalent: display: table-row;

Example usage:

<div class="table">
  <div class="table-row">Row 1</div>
  <div class="table-row">Row 2</div>
</div>

.table-cell

Sets the display property to table-cell, making the element behave like a table cell.

CSS equivalent: display: table-cell;

Example usage:

<div class="table">
  <div class="table-row">
    <div class="table-cell">Cell 1</div>
    <div class="table-cell">Cell 2</div>
  </div>
</div>

.table-column-group

Sets the display property to table-column-group, making the element behave as a container for column elements.

CSS equivalent: display: table-column-group;

Example usage:

<div class="table">
  <div class="table-column-group">
    ...
  </div>
</div>

.table-row-group

Sets the display property to table-row-group, making the element behave as a container for row elements.

CSS equivalent: display: table-row-group;

Example usage:

<div class="table">
  <div class="table-row-group">
    ...
  </div>
</div>

.table-header-group

Sets the display property to table-header-group, creating a group of header rows within a table.

CSS equivalent: display: table-header-group;

Example usage:

<div class="table">
  <div class="table-header-group">
    ...
  </div>
</div>

.table-footer-group

Sets the display property to table-footer-group, creating a group of footer rows within a table.

CSS equivalent: display: table-footer-group;

Example usage:

<div class="table">
  <div class="table-footer-group">
    ...
  </div>
</div>

.list-item

Sets the display property to list-item, making the element behave as a list item.

CSS equivalent: display: list-item;

Example usage:

<ul>
  <li class="list-item">List Item 1</li>
  <li class="list-item">List Item 2</li>
</ul>

These classes allow you to control the display behavior of elements, defining how they interact with other elements in the layout. Use them to achieve different layout structures and alignment effects within your design.

PreviousClearNextFloat

Last updated