pojokcodeid.nvim-lazy/my-snippets/B5-Snippets/templates/snippets/flex-utility.html
asep komarudin 1ab37bd478 update
2023-01-15 00:19:37 +07:00

141 lines
No EOL
2.9 KiB
HTML

<div class="d-${1|flex,inline-flex,sm-flex,sm-inline-flex,md-flex,md-inline-flex,lg-flex,lg-inline-flex,xl-flex,xl-inline-flex,xxl-flex,xxl-inline-flex|} ${2|row,row-reverse,column,column-reverse,sm-row,sm-row-reverse,sm-column,sm-column-reverse,md-row,md-row-reverse,md-column,md-column-reverse,lg-row,lg-row-reverse,lg-column,lg-column-reverse,xl-row,xl-row-reverse,xl-column,xl-column-reverse,xxl-row,xxl-row-reverse,xxl-column,xxl-column-reverse|} ${3|!spacing,!shadow,!color,!font|}">
</div>
This has x options:
1. behavior
2. direction
3. justify content
4. align-items
5.
!flex-justify
justify-content-${|start,end,center,between,around,evenly,sm-start,sm-end,sm-center,sm-between,sm-around,sm-evenly,md-start,md-end,md-center,md-between,md-around,md-evenly,lg-start,lg-end,lg-center,lg-between,lg-around,lg-evenly,xl-start,xl-end,xl-center,xl-between,xl-around,xl-evenly,xxl-start,xxl-end,xxl-center,xxl-between,xxl-around,xxl-evenly|}
Options:
- start,
- end,
- center,
- between,
- around,
- evenly,
- sm-start,
- sm-end,
- sm-center,
- sm-between,
- sm-around,
- sm-evenly,
- md-start,
- md-end,
- md-center,
- md-between,
- md-around,
- md-evenly,
- lg-start,
- lg-end,
- lg-center,
- lg-between,
- lg-around,
- lg-evenly,
- xl-start,
- xl-end,
- xl-center,
- xl-between,
- xl-around,
- xl-evenly,
- xxl-start,
- xxl-end,
- xxl-center,
- xxl-between,
- xxl-around,
- xxl-evenly,
!flex-align-item
align-items-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
Options:
- start,
- end,
- center,
- baseline,
- stretch,
- sm-start,
- sm-end,
- sm-center,
- sm-baseline,
- sm-stretch,
- md-start,
- md-end,
- md-center,
- md-baseline,
- md-stretch,
- lg-start,
- lg-end,
- lg-center,
- lg-baseline,
- lg-stretch,
- xl-start,
- xl-end,
- xl-center,
- xl-baseline,
- xl-stretch,
- xxl-start,
- xxl-end,
- xxl-center,
- xxl-baseline,
- xxl-stretch,
!flex-align-self
align-self-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
Options:
- start,
- end,
- center,
- baseline,
- stretch,
- sm-start,
- sm-end,
- sm-center,
- sm-baseline,
- sm-stretch,
- md-start,
- md-end,
- md-center,
- md-baseline,
- md-stretch,
- lg-start,
- lg-end,
- lg-center,
- lg-baseline,
- lg-stretch,
- xl-start,
- xl-end,
- xl-center,
- xl-baseline,
- xl-stretch,
- xxl-start,
- xxl-end,
- xxl-center,
- xxl-baseline,
- xxl-stretch,
!flex-fill
Description:
flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}
Options:
- fill
- sm-fill
- md-fill
- lg-fill
- xl-fill
- xxl-fill