Flexbox

Style a component's flexbox properties

import { flexbox } from 'jynx'

The flexbox function gives you control of a component's flex styles, providing support for both the shorthand property and all its sub-properties including align-items, justify-content, flex-direction, etc.

Usage

To use the flexbox function, create a component using the FlexboxProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { flexbox, FlexboxProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<FlexboxProps>`
    ${flexbox}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<FlexboxProps>((props) => `
    ${flexbox}
  `)

Props

By default, when passing a string to any flexbox props, the raw css value is used. This means you can define flexbox styles however you normally would:

<Component flex='0 1 auto' />

When using props like alignItems and justifyContent that support a set of pre-declared string values (flex-start, space-between, etc), these should be provided as suggestions in your IDE.

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create a space scale within your theme, which is then accessible from the gap prop.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  space: [2, 4, 8, 12, 16, 24, 32, 48, 64, 72]
}

/* simple object-based scale */
export const theme = {
  space: {
    extraSmall: '0.25rem',
    small: '0.5rem',
    medium: '1rem',
    large: '2rem',
    extraLarge: '4rem'
  }
}

Types

When working in typescript, use the FlexboxProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface FlexboxProps {
  flex?: StyleProp<CSS.Property.Flex>
  flexDirection?: StyleProp<CSS.Property.FlexDirection>
  flexFlow?: StyleProp<CSS.Property.FlexFlow>
  flexWrap?: StyleProp<CSS.Property.FlexWrap>
  alignItems?: StyleProp<CSS.Property.AlignItems>
  alignContent?: StyleProp<CSS.Property.AlignContent>
  alignSelf?: StyleProp<CSS.Property.AlignSelf>
  justifyContent?: StyleProp<CSS.Property.JustifyContent>
  gap?: StyleProp<CSS.Property.Gap<string | 0 | number> | ThemeValue<'space'>>
  flexGrow?: StyleProp<CSS.Property.FlexGrow>
  flexShrink?: StyleProp<CSS.Property.FlexShrink>
  flexBasis?: StyleProp<CSS.Property.FlexBasis>
  order?: StyleProp<CSS.Property.Order>
}

API

The flexbox function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	CSS Property	Theme Scale
flex	flex
flexDirection	flex-direction
flexFlow	flex-flow
flexWrap	flex-wrap
alignItems	align-items
alignContent	align-content
alignSelf	align-self
justifyContent	justify-content
gap	gap	space
flexGrow	flex-grow
flexShrink	flex-shrink
flexBasis	flex-basis
order	order

To use shorthand aliases with flex properties, check out extendedFlexbox.

Examples

/* using plain CSS values */
<Component flex='2 1 300px' />


/* with a theme scale defined */
/* `theme.space[3]` */
<Component gap={3} />

/* `theme.space.small` */
<Component gap='small' />


/* based on a conditional */
<Component justifyContent={isFullWidth ? 'stretch' : 'flex-start'} />


/* using responsive styles */
<Component alignItems={['flex-start', 'center', null, 'flex-start']} />

<Component flexDirection={{_: 'column', md: 'row'}} />


/* using responsive styles with theme scales */
<Component gap={[0, 1, null, 2]} />

<Component gap={{_: 'small', sm: 'medium' xl: 'large'}} />