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

---
id: 1b812bc4-8816-4c14-a037-a6e54a4eda22
---

# Flex

> Learn about the Flex component for configuring UI extension layout.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

The `Flex` component renders an empty `div` container set to `display=flex`. When wrapped around other components, it enables those child components to be arranged using props. `Flex` can contain other `Flex` or `Box` components.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extension-components-flex-child.png?width=521&height=207&name=ui-extension-components-flex-child.png" alt="ui-extension-components-flex-child" />
</Frame>

```jsx theme={null}
import { Flex, Tile } from "@hubspot/ui-extensions";
const Extension = () => {
  return (
    <Flex direction={"row"} justify={"end"} wrap={"wrap"} gap={"small"}>
      <Tile>Left</Tile>
      <Tile>Right</Tile>
      <Flex direction={"column"}>
        <Tile>Bottom</Tile>
      </Flex>
    </Flex>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="Flex">
  <ComponentProp name="align" required={false} type={<><code>"baseline"</code> | <code>"center"</code> | <code>"end"</code> | <code>"start"</code> | <code>"stretch"</code></>} description={<>Distributes components along the cross-axis using the available free space.</>} defaultValue={<><code>"stretch"</code></>} />

  <ComponentProp name="alignSelf" required={false} type={<><code>"baseline"</code> | <code>"center"</code> | <code>"end"</code> | <code>"start"</code> | <code>"stretch"</code></>} description={<>Distributes a child component along the cross-axis using the available free space. Use this prop for nested <code>Flex</code> and <code>Box</code> components to align them differently from other child components in the <code>Flex</code> group.</>} />

  <ComponentProp name="children" required={false} type={<><code>ReactNode</code></>} description={<>Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.</>} />

  <ComponentProp name="direction" required={false} type={<><code>"column"</code> | <code>"row"</code></>} description={<>Arranges the components horizontally or vertically by setting the main axis.</>} defaultValue={<><code>"row"</code></>} />

  <ComponentProp name="gap" required={false} type={<><code>"extra-large"</code> | <code>"extra-small"</code> | <code>"flush"</code> | <code>"large"</code> | <code>"lg"</code> | <code>"md"</code> | <code>"medium"</code> | <code>"sm"</code> | <code>"small"</code> | <code>"xl"</code> | <code>"xs"</code></>} description={<>Sets the spacing between components.</>} defaultValue={<><code>"flush"</code></>} />

  <ComponentProp name="justify" required={false} type={<><code>"around"</code> | <code>"between"</code> | <code>"center"</code> | <code>"end"</code> | <code>"start"</code></>} description={<>Distributes components along the main axis using the available free space.</>} defaultValue={<><code>"start"</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />

  <ComponentProp name="wrap" required={false} type={<><code>"nowrap"</code> | <code>"wrap"</code> | <code>false</code> | <code>true</code></>} description={<>Whether components will wrap rather than trying to fit on one line.</>} defaultValue={<><code>"nowrap"</code></>} />
</ComponentProps>

## Usage examples

### Horizontal layout

To arrange components horizontally, set `direction` to `row`. Then, use `justify` to configure the horizontal distribution. By default, components will stretch across the container if `justify` is not specified.

<table>
  <tbody>
    <tr>
      <td>
        <Frame>
          <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/flex-tiles-justify-between.png" alt="flex-tiles-justify-between" />
        </Frame>
      </td>
    </tr>

    <tr>
      <td>
        <code>justify=\{'between'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/flex-tiles-justify-around.png" alt="flex-tiles-justify-around" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>justify=\{'around'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-justify-start.png" alt="ui-extensions-layout-tile-justify-start" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>justify=\{'start'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-justify-center.png" alt="ui-extensions-layout-tile-justify-center" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>justify=\{'center'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-justify-end.png" alt="ui-extensions-layout-tile-justify-end" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>justify=\{'end'}</code>
      </td>
    </tr>
  </tbody>
</table>

### Wrap

By default, components in a `row` will be arranged on one line when possible. Use the `wrap` prop to wrap components onto new lines when needed.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-row-wrap.png" alt="ui-extensions-layout-tile-row-wrap" />
</Frame>

```jsx theme={null}
<Flex direction={"row"} justify={"between"} wrap={"wrap"} gap={"medium"}>
  <Tile>One</Tile>
  <Tile>Two</Tile>
  <Tile>Three</Tile>
  <Tile>Four</Tile>
  <Tile>Five</Tile>
  <Tile>Six</Tile>
  <Tile>Seven</Tile>
  <Tile>Eight</Tile>
</Flex>;
```

### Vertical layout

To arrange components vertically, set direction to `column`, then use the `align` prop to distribute them. By default, components will stretch across the extension container width when `align` is not specified.

<table>
  <tbody>
    <tr>
      <td>
        <Frame>
          <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-column-align-start.png?width=500&height=268&name=ui-extrensions-layout-tile-column-align-start.png" alt="ui-extensions-layout-tile-column-align-start" />
        </Frame>
      </td>
    </tr>

    <tr>
      <td>
        <code>align=\{'start'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-column-align-center.png?width=500&height=267&name=ui-extrensions-layout-tile-column-align-center.png" alt="ui-extensions-layout-tile-column-align-center" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>align=\{'center'}</code>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <Frame>
            <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extrensions-layout-tile-column-align-end.png?width=500&height=262&name=ui-extrensions-layout-tile-column-align-end.png" alt="ui-extensions-layout-tile-column-align-end" />
          </Frame>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <code>align=\{'end'}</code>
      </td>
    </tr>
  </tbody>
</table>

### Spacing

In the `Flex` component, you can use the `gap` prop to apply even spacing between the tiles. This prop will apply spacing equally for both `row` and `column` directions.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/flex-tiles-gap.png?width=528&height=701&name=flex-tiles-gap.png" alt="flex-tiles-gap" />
</Frame>

```jsx theme={null}
<Flex direction={"row"} justify={"start"} gap={"flush" | "extra-small" | "small" | "medium" | "large" | "extra-large"}>
  <Tile>Tile 1</Tile>
  <Tile>Tile 2</Tile>
  <Tile>Tile 3</Tile>
</Flex>;
```

### Using Flex in Flex

You can wrap child `Flex` components with `Flex` to set more specific rules for individual components. A child `Flex` component will not inherit props specified in the parent `Flex` component, so you'll need to repeat any props you've previously defined to maintain them.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extension-components-flex-child.png?width=521&height=207&name=ui-extension-components-flex-child.png" alt="ui-extension-components-flex-child" />
</Frame>

```jsx theme={null}
<Flex direction={"row"} justify={"end"} wrap={"wrap"} gap={"small"}>
  <Tile>Left</Tile>
  <Tile>Right</Tile>
  <Flex direction={"column"}>
    <Tile>Bottom</Tile>
  </Flex>
</Flex>;
```

## Related components

* [Tile](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tile)
* [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box)
* [Divider](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider)
* [Inline](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline)