## Flex  
Use the Flex component to compose elements in a flex container.  
Category: Layout  

### Introduction

### Supported Props

| Prop        | CSS Property     | Theme Key       |
|-------------|------------------|-----------------|
| gap         | gap              | theme.spacing   |
| rowGap      | rowGap           | theme.spacing   |
| columnGap   | columnGap        | theme.spacing   |
| align       | alignItems       | –               |
| justify     | justifyContent   | –               |
| wrap        | flexWrap         | –               |
| direction   | flexDirection    | –               |



### Responsive Props

Flex component props can have responsive values the same way as other style props:

```python
import dash_mantine_components as dmc

component = dmc.Flex(
    [
        dmc.Button("Button 1"),
        dmc.Button("Button 2"),
        dmc.Button("Button 3"),
    ],
    direction={"base": "column", "sm": "row"},
    gap={"base": "sm", "sm": "lg"},
    justify={"sm": "center"},
)
```
### Comparison: Group, Stack, and Flex

`Flex` component is an alternative to `Group` and `Stack`. 
`Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.

| Feature                    | Group | Stack | Flex |
|----------------------------|-------|-------|------|
| Direction                  | horizontal | vertical | both |
| Equal width children       | ✅     | ❌    | ❌   |
| flex-wrap support          | ✅     | ❌    | ✅   |
| Responsive flexbox props   | ❌     | ❌    | ✅   |




### Browser support
`Flex` uses flexbox gap to add spacing between children. In older browsers, `Flex` children may not have spacing.




### Styles API



This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.



| Name | Static selector    | Description  |
|:-----|:-------------------|:-------------|
| root | .mantine-Flex-root | Root element |


### Keyword Arguments
#### Flex

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- align (dict; optional):
    `align-items` CSS property. Supports dict for responsive values.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- columnGap (string | number | dict; optional):
    theme.spacing key, `column-gap` CSS property, or dict for
    responsive values.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- direction (dict; optional):
    `flex-direction` CSS property. Supports dict for responsive
    values.

- gap (string | number | dict; optional):
    theme.spacing key, `gap` CSS property, or dict for responsive
    values.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- justify (dict; optional):
    `justify-content` CSS property.  Supports dict for responsive
    values.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- rowGap (string | number | dict; optional):
    theme.spacing key, `row-gap` CSS property, or dict for responsive
    values.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrap (dict; optional):
    `flex-wrap` CSS property. Supports dict for responsive values.