Skip to content

Instantly share code, notes, and snippets.

@jojojojojoj5564656465465
Last active July 12, 2023 13:00
Show Gist options
  • Save jojojojojoj5564656465465/40ed7958e6aee8aff5f78824d7fe22c4 to your computer and use it in GitHub Desktop.
Save jojojojojoj5564656465465/40ed7958e6aee8aff5f78824d7fe22c4 to your computer and use it in GitHub Desktop.
Flexbox Unocss Rule helper flex-col-5= center center flex-col-1= start start
[
/^flex-(row|col)-([1-9])$/,
([, direction, number]) => {
type PositionProps = Readonly<'start' | 'center' | 'end'>
const positions = {
1: ['start', 'start'],
2: ['center', 'start'],
3: ['end', 'start'],
4: ['start', 'center'],
5: ['center', 'center'],
6: ['end', 'center'],
7: ['start', 'end'],
8: ['center', 'end'],
9: ['end', 'end']
} as const satisfies Record<
number,
readonly [PositionProps, PositionProps]
>
//IIFE ==>
const direction2 = ((): 'row' | 'column' => {
const d = direction as Readonly<'row' | 'col'>
return d === 'row' ? 'row' : 'column'
})()
const [justify, align] =
positions[Number(number) as keyof typeof positions]
return {
display: 'flex',
'flex-direction': direction2,
'justify-content': justify,
'align-items': align
}
},
{ autocomplete: 'flex-(col|row)-(1|2|3|4|5|6|7|8|9)' }
]
@jojojojojoj5564656465465
Copy link
Author

image

@jojojojojoj5564656465465
Copy link
Author

image

@jojojojojoj5564656465465
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment