> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display

> Control how elements participate in layout with the bundled display utilities.

export const BlockDemo = () => {
  const blockStyle = {
    background: "#0ea5e9",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.block</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const InlineDemo = () => {
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.inline / .inline-block</span>
        <div className="tw-demo-card">
          <div style={{
    fontSize: "0.875rem",
    lineHeight: 1.75,
    color: "var(--demo-fg-muted)"
  }}>
            When controlling the flow of text, using the CSS property{" "}
            <span style={{
    background: "rgba(14, 165, 233, 0.15)",
    padding: "0.125rem 0.25rem",
    borderRadius: "0.25rem",
    fontFamily: "monospace",
    color: "#0ea5e9"
  }}>display: inline</span>{" "}
            will cause the text inside the element to wrap normally. While using the property{" "}
            <span style={{
    background: "rgba(14, 165, 233, 0.15)",
    padding: "0.125rem 0.25rem",
    borderRadius: "0.25rem",
    fontFamily: "monospace",
    color: "#0ea5e9"
  }}>display: inline-block</span>{" "}
            will wrap the element to prevent the text inside from extending beyond its parent.
          </div>
        </div>
      </div>
    </div>;
};

export const FlexDemo = () => {
  const blockStyle = {
    background: "#0ea5e9",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)",
    flex: 1
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const InlineFlexDemo = () => {
  const tagStyle = {
    background: "#0ea5e9",
    color: "#ffffff",
    borderRadius: "0.5rem",
    padding: "0.4rem 0.75rem",
    fontSize: "0.8rem",
    fontWeight: 600,
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.inline-flex</span>
        <div className="tw-demo-card" style={{
    textAlign: "center"
  }}>
          <span style={{
    fontSize: "0.875rem",
    color: "var(--demo-fg-muted)"
  }}>Text before </span>
          <span style={{
    display: "inline-flex",
    alignItems: "center",
    gap: "0.375rem",
    ...tagStyle
  }}>
            <span>Icon</span>
            <span>Label</span>
          </span>
          <span style={{
    fontSize: "0.875rem",
    color: "var(--demo-fg-muted)"
  }}> text after</span>
        </div>
      </div>
    </div>;
};

## Overview

Display utilities control how elements render in layout. They are the starting point for most framework composition: block flow, inline layout, flex layout, and visibility toggles.

| Class           | CSS                      | Usage                        |
| --------------- | ------------------------ | ---------------------------- |
| `.block`        | `display: block;`        | Full-width block element     |
| `.inline-block` | `display: inline-block;` | Inline with box-model sizing |
| `.flex`         | `display: flex;`         | Flex container               |
| `.inline-flex`  | `display: inline-flex;`  | Inline flex container        |
| `.hidden`       | `display: none;`         | Remove from layout           |

## Block

`.block` makes an element start on a new line and fill the full width of its parent. This is the default for divs and section elements.

<BlockDemo />

```html theme={null}
<div class="elementor-element block padding-4 background-primary text-white rounded">
  This is a block element
</div>
```

## Inline and Inline Block

`.inline-block` gives an element inline flow (it sits alongside text) but lets you control width, height, padding, and margin like a block. Use it for badges, buttons, and compact UI controls.

<InlineDemo />

```html theme={null}
<div class="elementor-element text-center">
  <button class="inline-block padding-horizontal-6 padding-vertical-3 background-primary text-white rounded">
    Button 1
  </button>
  <button class="inline-block padding-horizontal-6 padding-vertical-3 background-success text-white rounded">
    Button 2
  </button>
</div>
```

## Flex

`.flex` turns an element into a flex container, laying children out in a horizontal row by default. This is the foundation for most modern layout composition.

<FlexDemo />

```html theme={null}
<div class="elementor-element flex items-center gap-4">
  <div class="padding-4 background-primary text-white rounded">
    Item 1
  </div>
  <div class="padding-4 background-success text-white rounded">
    Item 2
  </div>
  <div class="padding-4 background-error text-white rounded">
    Item 3
  </div>
</div>
```

## Inline Flex

`.inline-flex` creates a flex container that participates in inline flow. The container sizes to its content and sits alongside surrounding text. Use it for inline tag groups and compact controls.

<InlineFlexDemo />

```html theme={null}
<div class="elementor-element text-center">
  <div class="inline-flex items-center gap-2 background-gray-light padding-2 rounded">
    <span>
      Icon
    </span>
    <span>
      Label
    </span>
  </div>
</div>
```

## Hidden

`.hidden` removes an element from layout entirely. It will not be visible or take up space.

<Warning>
  The `.hidden` utility removes the element from layout and accessibility trees. Use it intentionally.
</Warning>

## Best Practices

<Steps>
  <Step title="Use Flex for Layouts">
    Prefer `.flex` for modern horizontal and vertical layout composition.
  </Step>

  <Step title="Use Block for Structural Elements">
    Reach for `.block` when the element should start on a new line and fill the row.
  </Step>

  <Step title="Use Inline Block or Inline Flex for Compact UI">
    Badges, buttons, and compact controls often benefit from inline formatting with layout control.
  </Step>

  <Step title="Use Responsive Suffixes Where Needed">
    Display classes also support the bundled `--on-*` suffix pattern when layout behavior needs to change by viewport.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flexbox" href="/flexbox/flex">
    Complete flexbox utilities for layouts
  </Card>

  <Card title="Spacing" href="/concepts/spacing">
    Margin, padding, and gap utilities
  </Card>
</CardGroup>