Flex

Build flexible layouts using CSS Flexbox

Use the Flex component to arrange and align content dynamically within a container using CSS Flexbox. To use the Flex component, make sure you don’t have the includeUtilities rule disabled in your setup mixin (this rule is enabled by default):

@use 'webcoreui/styles' as *;
@include setup((
    includeUtilities: false // Remove this option if you want to use the Flex component
));

---
import { Flex } from 'webcoreui/astro'
---

<Flex>
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
</Flex>

<script>
    import { Flex } from 'webcoreui/svelte'
</script>

<Flex>
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
</Flex>

import React from 'react'
import { Flex } from 'webcoreui/react'

const Component = () => (
    <Flex>
        <Box>1</Box>
        <Box>2</Box>
        <Box>3</Box>
    </Flex>
)

export default Component

Simply pass your elements or components inside the Flex component to display them in a flex container. By default, the element will be rendered as a div. This can be changed using the element prop:

<Flex element="section">...</Flex> <!-- Rendered as a `section` -->
<Flex element="article">...</Flex> <!-- Rendered as an `article` -->
<Flex element="main">...</Flex> <!-- Rendered as a `main` -->

Gap

The gap between flex items is set to 20px by default. To change this, use the gap prop with one of the following values:

<Flex gap="none" />
<Flex gap="xxs" />
<Flex gap="xs" />
...

You can configure your gaps using the webcore.config.scss configuration file. Read more about how to configure gaps in the CSS configuration documentation.

Direction

To set the direction of your flex container, set the direction property whose value can be one of row, column, row-reverse, or column-reverse:

<Flex direction="row" /> <!-- Default -->
<Flex direction="column" />
<Flex direction="row-reverse" />
<Flex direction="column-reverse" />

Alignment

To change the horizontal or vertical alignment of your flex items, use the alignment prop with one or both of the following values:

<Flex alignment={{ horizontal: 'start' }}>...</Flex>
<Flex alignment={{ horizontal: 'end' }}>...</Flex>
<Flex alignment={{ horizontal: 'center' }}>...</Flex>
<Flex alignment={{ horizontal: 'between' }}>...</Flex>
<Flex alignment={{ horizontal: 'around' }}>...</Flex>
<Flex alignment={{ horizontal: 'evenly' }}>...</Flex>

You can pass a vertical property to the object in a similar manner to specify the vertical alignment of your items:

<Flex alignment={{ vertical: 'start' }}>...</Flex>
<Flex alignment={{ vertical: 'end' }}>...</Flex>
<Flex alignment={{ vertical: 'center' }}>...</Flex>
<Flex alignment={{ vertical: 'baseline' }}>...</Flex>
<Flex alignment={{ vertical: 'stretch' }}>...</Flex>

Wrap

Similar to the direction prop, you can set the way elements wrap using the wrap prop. It accepts the following values which directly correspond with the native CSS value: wrap, nowrap, wrap-reverse.

<Flex wrap="wrap" />
<Flex wrap="nowrap" /> <!-- Default -->
<Flex wrap="wrap-reverse" />

Responsiveness

The above properties can also be used responsively. Simply pass an object for the prop that you’d like to change based on media queries and define the following props:

<Flex gap={{
    default: 'none',
    xs: 'xs',
    sm: 'sm',
    md: 'md',
    lg: 'lg'
}} />

<Flex direction={{
    default: 'row',
    xs: 'column',
    sm: 'row-reverse',
    md: 'column-reverse',
    lg: 'row'
}} />

<Flex alignment={{
    default: {
        horizontal: 'start',
        vertical: 'start'
    },
    xs: {
        horizontal: 'center',
        vertical: 'center'
    },
    sm: { ... },
    md: { ... },
    lg: { ... }
}} />

<Flex wrap={{
    default: 'wrap',
    xs: 'nowrap',
    sm: 'wrap-reverse'
}} />

Notice that for alignment, you’ll need to pass an object that can have a horizontal and vertical property. All breakpoints are optional, you can create the object as needed.

API

type FlexProps = {
    element?: string
    gap?: Responsive<Gap>
    alignment?: Responsive<Alignment>
    direction?: Responsive<Direction>
    wrap?: Responsive<Wrap>
    className?: string
}

type ReactFlexProps = {
    Element?: keyof JSX.IntrinsicElements
    children: React.ReactNode
} & Omit<FlexProps, 'element'>

type Gap = 'none'
    | 'xxs'
    | 'xs'
    | 'sm'
    | 'md'
    | 'default'
    | 'lg'
    | 'xl'
    | 'xl2'
    | 'xl3'
    | 'xl4'
    | 'xl5'

type VerticalAlignment = 'center'
    | 'start'
    | 'end'
    | 'baseline'
    | 'stretch'

type HorizontalAlignment = 'center'
    | 'start'
    | 'end'
    | 'between'
    | 'around'
    | 'evenly'
    | 'stretch'

type Direction = 'row'
    | 'column'
    | 'row-reverse'
    | 'column-reverse'

type Wrap = 'wrap'
    | 'nowrap'
    | 'wrap-reverse'

type Responsive<T> = T | {
    default?: T
    xs?: T
    sm?: T
    md?: T
    lg?: T
}

type Alignment = {
    horizontal?: HorizontalAlignment
    vertical?: VerticalAlignment
}