# gds-flex

**Class**: `GdsFlex`

**Tag**: `<gds-flex>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `padding` | `string \| undefined` | `-` | Style Expression Property that controls the `padding` property. Only accepts space tokens. |
| `'padding-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-inline` property. Only accepts space tokens. |
| `'padding-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-block` property. Only accepts space tokens. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
| `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. |
| `display` | `string \| undefined` | `-` | Controls the display property. Supports all valid CSS display values. |
| `level` | `GdsColorLevel` | `-` | The level of the container is used to resolve the color tokens from the corresponding level. Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.  Default for `gds-div` is level 2. |
| `color` | `string \| undefined` | `-` | Style Expression Property that controls the `color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div color="neutral-01/0.2"></gds-div> ``` |
| `background` | `string \| undefined` | `-` | Style Expression Property that controls the `background` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div background="neutral-01/0.2"></gds-div> ``` |
| `border` | `string \| undefined` | `-` | Style Expression Property that controls the `border` property. Accepts a string of the same format as the CSS border property.  ```html <gds-div border="4xs solid subtle-01/0.2"></gds-div> ```  Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value. |
| `'border-color'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div border-color="subtle-01/0.2"></gds-div> ``` |
| `'border-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-width` property. Only accepts space tokens. |
| `'border-style'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-style` property. Supports all valid CSS `border-style` values. |
| `'border-radius'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-radius` property. Only accepts space tokens. |
| `'box-shadow'` | `string \| undefined` | `-` | Style Expression Property for the `box-shadow` property.  Accepts shadow tokens from the design system.  `xs`, `s`, `m`, `l`, `xl` |
| `opacity` | `string \| undefined` | `-` | Style Expression Property that controls the `opacity` property. Supports all valid CSS `opacity` values. |
| `overflow` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow` property. Supports all valid CSS `overflow` values. |
| `'box-sizing'` | `string \| undefined` | `-` | Style Expression Property that controls the `box-sizing` property. Supports all valid CSS `box-sizing` values. |
| `'z-index'` | `string \| undefined` | `-` | Style Expression Property that controls the `z-index` property. Supports all valid CSS `z-index` values. |
| `'font'` | `string \| undefined` | `-` | Style Expression Property that controls the `font` property. Supports all font tokens from the design system. |
| `'font-weight'` | `string \| undefined` | `-` | Style Expression Property that controls the `font-weight` property. Supports all typography weight tokens from the design system. |
| `'text-align'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-align` property. Supports all valid CSS `text-align` values. |
| `'text-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-wrap` property. Supports all valid CSS `text-wrap` values. |
| `'overflow-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow-wrap` property. Supports all valid CSS `overflow-wrap` values. |
| `'white-space'` | `string \| undefined` | `-` | Style Expression Property that controls the `white-space` property. Supports all valid CSS `white-space` values. |
| `gap` | `string \| undefined` | `-` | Style Expression Property that controls the `gap` property. Only accepts space tokens. |
| `'align-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-items` property. Supports all valid CSS `align-items` values. |
| `'align-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-content` property. Supports all valid CSS `align-content` values. |
| `'justify-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-content` property. Supports all valid CSS `justify-content` values. |
| `'justify-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-items` property. Supports all valid CSS `justify-items` values. |
| `'flex-direction'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-direction` property. Supports all valid CSS `flex-direction` values. |
| `'flex-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-wrap` property. Supports all valid CSS `flex-wrap` values. |
| `'place-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-items` property. Supports all valid CSS `place-items` values. |
| `'place-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-content` property. Supports all valid CSS `place-content` values. |
| `'aspect-ratio'` | `string \| undefined` | `-` | Style Expression Property that controls the `aspect-ratio` property. Supports all valid CSS `aspect-ratio` values. |
| `cursor` | `string \| undefined` | `-` | Style Expression Property that controls the `cursor` property. Supports all valid CSS `cursor` values. |
| `'pointer-events'` | `string \| undefined` | `-` | Style Expression Property that controls the `pointer-events` property. Supports all valid CSS `pointer-events` values. |
