styled system

flexes

Confira as propriedades de estilos destinadas ao flex.

índice

como utilizar

Nós temos diversas propriedades disponíveis em relação ao flex:

import {
  alignContent,
  alignItems,
  alignSelf,
  flex,
  flexBasis,
  flexDirection,
  flexFlow,
  flexGrow,
  flexShrink,
  flexWrap,
  gap,
  justifyContent,
  justifySelf,
  order,
} from '@olist/styled-system';

Você pode importar somente a desejada ou pode utilizar a função flexes que encapsula todas em uma só.

// isso é o equivalente que importar todas as funções acima
import { flexes } from '@olist/styled-system';

Para utilizar basta aplicar a função desejada em seu "styled-component":

import styled from 'styled-components';
import { alignContent } from '@olist/styled-system';

const MyComponent = styled.div`
  ${alignContent}
`;

// ...

<MyComponent alignContent="start" />
<MyComponent alignContent="center" />
<MyComponent alignContent="space-between" />
<MyComponent alignContent="space-around" />

utilização com typescript

Para utilizar as funções de border com typescript é necessário importar o tipo correspondente a função utilizada do pacote @olist/styled-system:

Supondo que você está utilizando a função justifyContent você deve importar o tipo JustifyContentProps:

import styled from 'styled-components';
import { justifyContent, type JustifyContentProps } from '@olist/styled-system';

const MyComponent = styled.div<JustifyContentProps>`
  ${justifyContent}
`;

// ...

<MyComponent justifyContent="center" />;

utilizando todas as propriedades de uma só vez

Você pode utilizar a função flexes para aplicar todas as propriedades de uma só vez, basta importar a função flexes e o seu tipo FlexesProps:

import styled from 'styled-components';
import { flexes, type FlexesProps } from '@olist/styled-system';

const MyComponent = styled.div<FlexesProps>`
  ${flexes}
`;

// ...

<MyComponent flex={1} alignContent="center" alignItems="center" />;

utilizando a função flexes você terá disponível as seguintes propriedades para utilizar em seu componente:

propriedadealiasestype
alignItems-AlignItemsProps
alignContent-AlignContentProps
alignSelf-AlignSelfProps
flexDirection-FlexDirectionProps
justifyContent-JustifyContentProps
justifySelf-JustifySelfProps
flex-FlexProps
flexes-FlexesProps
flexBasis-FlexBasisProps
flexFlow-FlexFlowProps
flexGrow-FlexGrowProps
flexShrink-FlexShrinkProps
flexWrap-FlexWrapProps
order-OrderProps
gap-GapProps