Flex

View on GitHub

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

Flex is a utility component that surfaces Flexbox properties. Flexbox is a one-dimensional layout method used to arrange, align and space items in rows or columns.

Please note: The gap attribute in Flex layouts were not fully supported in Safari until version 14.1. (See MDN).

<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>

<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
flex-child
flex-parent
grid-child
height
margin
overflow
width