---
title: "Components — Flex"
canonical: https://sky-ui.cf.sky.com/components/flex
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Flex

Flex is a utility component that surfaces Flexbox properties.

```js
import { Flex } from '@sky-uk/ui-core';
```

---

`Flex` is a utility component that surfaces `Flexbox` properties. [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) is a one-dimensional layout method used to arrange, align and space items in rows or columns.

**Note:** **Please note:** The `gap` attribute in Flex layouts were not fully supported in Safari until
  version 14.1. [(See
  MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility).

```tsx
<Flex $alignItems="center" $gap={4}>
    <Box $bgColor={'grey10'} $padding={3} $height="100px">1/3</Box>
    <Box $bgColor={'grey10'} $padding={3} $height="300px">1/3</Box>
    <Box $bgColor={'grey10'} $padding={3} $height="200px">1/3</Box>
</Flex>
```

---

## System Modifiers

The `Flex` component supports the props applied using the following system modifiers:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [flex-parent](/core/system/flex-parent/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [overflow](/core/system/overflow/)
- [width](/core/system/width/)