---
url: /api/css/layout.md
---
# CSS: layout

`.--display-flex` — Display and text-align utilities — `.--display-<value>` and `.--text-align-<value>` — as composable, global classes, usable bare or chained onto any component.

**Source:** [index.ts](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/utilities/layout/index.ts)

## Usage

```css
@import "@pantoken/components/utilities.css";
```

## Examples

```html
<div class="--display-flex --text-align-center">
  <span>One</span>
  <span>Two</span>
</div>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.--display-flex` | Sets `display: flex`. |
| `.--display-*` | Display utilities: `block`, `inline-block`, `inline`, `flex`, `inline-flex`, and `none`. |
| `.--text-align-*` | Text-alignment utilities: `start`, `center`, `end`, and `justify`. |