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

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

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.