Return to Sky UI homepage

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>

System Modifiers

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