1.16.1 Parameters

Parameter: flex ¶

Default value:

((#<rule selector: ".flex-1" declarations: (#<declaration property: flex value: "1.00rem">)> #<rule selector: ".flex-2" declarations: (#<declaration property: flex value: "2.00rem">)> #<rule selector: ".flex-3" declarations: (#<declaration property: flex value: "3.00rem">)> #<rule selector: ".flex-4" declarations: (#<declaration property: flex value: "4.00rem">)> #<rule selector: ".flex-5" declarations: (#<declaration property: flex value: "5.00rem">)> #<rule selector: ".flex-6" declarations: (#<declaration property: flex value: "6.00rem">)> #<rule selector: ".flex-7" declarations: (#<declaration property: flex value: "7.00rem">)> #<rule selector: ".flex-8" declarations: (#<declaration property: flex value: "8.00rem">)> #<rule selector: ".flex-9" declarations: (#<declaration property: flex value: "9.00rem">)> #<rule selector: ".flex-10" declarations: (#<declaration property: flex value: "10.00rem">)> #<rule selector: ".flex-12" declarations: (#<declaration property: flex value: "12.00rem">)> #<rule selector: ".flex-14" declarations: (#<declaration property: flex value: "14.00rem">)> #<rule selector: ".flex-16" declarations: (#<declaration property: flex value: "16.00rem">)> #<rule selector: ".flex-20" declarations: (#<declaration property: flex value: "20.00rem">)> #<rule selector: ".flex-24" declarations: (#<declaration property: flex value: "24.00rem">)> #<rule selector: ".flex-28" declarations: (#<declaration property: flex value: "28.00rem">)> #<rule selector: ".flex-32" declarations: (#<declaration property: flex value: "32.00rem">)> #<rule selector: ".flex-48" declarations: (#<declaration property: flex value: "48.00rem">)> #<rule selector: ".flex-64" declarations: (#<declaration property: flex value: "64.00rem">)> #<rule selector: ".flex-72" declarations: (#<declaration property: flex value: "72.00rem">)> #<rule selector: ".flex-90" declarations: (#<declaration property: flex value: "90.00rem">)> #<rule selector: ".flex-96" declarations: (#<declaration property: flex value: "96.00rem">)> #<rule selector: ".flex-100" declarations: (#<declaration property: flex value: "100.00rem">)> #<rule selector: ".flex-128" declarations: (#<declaration property: flex value: "128.00rem">)> #<rule selector: ".flex-196" declarations: (#<declaration property: flex value: "196.00rem">)> #<rule selector: ".flex-256" declarations: (#<declaration property: flex value: "256.00rem">)> #<rule selector: ".flex-512" declarations: (#<declaration property: flex value: "512.00rem">)> #<rule selector: ".flex-2xs" declarations: (#<declaration property: flex value: "1.00rem">)> #<rule selector: ".flex-xs" declarations: (#<declaration property: flex value: "2.00rem">)> #<rule selector: ".flex-sm" declarations: (#<declaration property: flex value: "3.00rem">)> #<rule selector: ".flex-md" declarations: (#<declaration property: flex value: "4.00rem">)> #<rule selector: ".flex-lg" declarations: (#<declaration property: flex value: "5.00rem">)> #<rule selector: ".flex-xl" declarations: (#<declaration property: flex value: "6.00rem">)> #<rule selector: ".flex-2xl" declarations: (#<declaration property: flex value: "7.00rem">)> #<rule selector: ".flex-3xl" declarations: (#<declaration property: flex value: "8.00rem">)> #<rule selector: ".flex-4xl" declarations: (#<declaration property: flex value: "9.00rem">)> #<rule selector: ".flex-5xl" declarations: (#<declaration property: flex value: "10.00rem">)>) (#<rule selector: ".flex-2\\/3" declarations: (#<declaration property: flex value: "66.6%">)> #<rule selector: ".flex-1\\/2" declarations: (#<declaration property: flex value: "50%">)> #<rule selector: ".flex-1\\/3" declarations: (#<declaration property: flex value: "33.3%">)> #<rule selector: ".flex-1\\/4" declarations: (#<declaration property: flex value: "25%">)> #<rule selector: ".flex-1\\/5" declarations: (#<declaration property: flex value: "20%">)> #<rule selector: ".flex-1\\/6" declarations: (#<declaration property: flex value: "16.6%">)> #<rule selector: ".flex-1\\/8" declarations: (#<declaration property: flex value: "12.5%">)>) (#<rule selector: ".flex-initial" declarations: (#<declaration property: flex value: "0 auto">)> #<rule selector: ".flex-none" declarations: (#<declaration property: flex value: none>)> #<rule selector: ".flex-auto" declarations: (#<declaration property: flex value: auto>)>))

Parameter: flex-align-content ¶

Default value:

(#<rule selector: ".content-start" declarations: (#<declaration property: align-content value: flex-start>)> #<rule selector: ".content-end" declarations: (#<declaration property: align-content value: flex-end>)> #<rule selector: ".content-center" declarations: (#<declaration property: align-content value: center>)> #<rule selector: ".content-normal" declarations: (#<declaration property: align-content value: normal>)> #<rule selector: ".content-between" declarations: (#<declaration property: align-content value: space-between>)> #<rule selector: ".content-around" declarations: (#<declaration property: align-content value: space-around>)> #<rule selector: ".content-evenly" declarations: (#<declaration property: align-content value: space-evenly>)> #<rule selector: ".content-baseline" declarations: (#<declaration property: align-content value: baseline>)> #<rule selector: ".content-stretch" declarations: (#<declaration property: align-content value: stretch>)>)

Parameter: flex-align-items ¶

Default value:

(#<rule selector: ".items-start" declarations: (#<declaration property: align-items value: flex-start>)> #<rule selector: ".items-end" declarations: (#<declaration property: align-items value: flex-end>)> #<rule selector: ".items-end-safe" declarations: (#<declaration property: align-items value: "safe flex-end">)> #<rule selector: ".items-center" declarations: (#<declaration property: align-items value: center>)> #<rule selector: ".items-center-safe" declarations: (#<declaration property: align-items value: "safe center">)> #<rule selector: ".items-baseline" declarations: (#<declaration property: align-items value: baseline>)> #<rule selector: ".items-baseline-last" declarations: (#<declaration property: align-items value: "last baseline">)> #<rule selector: ".items-stretch" declarations: (#<declaration property: align-items value: stretch>)>)

Parameter: flex-align-self ¶

Default value:

(#<rule selector: ".self-auto" declarations: (#<declaration property: align-self value: auto>)> #<rule selector: ".self-start" declarations: (#<declaration property: align-self value: flex-start>)> #<rule selector: ".self-end" declarations: (#<declaration property: align-self value: flex-end>)> #<rule selector: ".self-end-safe" declarations: (#<declaration property: align-self value: "safe flex-end">)> #<rule selector: ".self-center" declarations: (#<declaration property: align-self value: center>)> #<rule selector: ".self-center-safe" declarations: (#<declaration property: align-self value: "safe center">)> #<rule selector: ".self-baseline" declarations: (#<declaration property: align-self value: baseline>)> #<rule selector: ".self-baseline-last" declarations: (#<declaration property: align-self value: "last baseline">)> #<rule selector: ".self-stretch" declarations: (#<declaration property: align-self value: stretch>)>)

Parameter: flex-basis ¶

Default value:

(#<rule selector: ".basis-2xs" declarations: (#<declaration property: flex-basis value: 1>)> #<rule selector: ".basis-xs" declarations: (#<declaration property: flex-basis value: 2>)> #<rule selector: ".basis-sm" declarations: (#<declaration property: flex-basis value: 3>)> #<rule selector: ".basis-md" declarations: (#<declaration property: flex-basis value: 4>)> #<rule selector: ".basis-lg" declarations: (#<declaration property: flex-basis value: 5>)> #<rule selector: ".basis-xl" declarations: (#<declaration property: flex-basis value: 6>)> #<rule selector: ".basis-2xl" declarations: (#<declaration property: flex-basis value: 7>)> #<rule selector: ".basis-3xl" declarations: (#<declaration property: flex-basis value: 8>)> #<rule selector: ".basis-4xl" declarations: (#<declaration property: flex-basis value: 9>)> #<rule selector: ".basis-5xl" declarations: (#<declaration property: flex-basis value: 10>)> #<rule selector: ".basis-1" declarations: (#<declaration property: flex-basis value: 1>)> #<rule selector: ".basis-2" declarations: (#<declaration property: flex-basis value: 2>)> #<rule selector: ".basis-3" declarations: (#<declaration property: flex-basis value: 3>)> #<rule selector: ".basis-4" declarations: (#<declaration property: flex-basis value: 4>)> #<rule selector: ".basis-5" declarations: (#<declaration property: flex-basis value: 5>)> #<rule selector: ".basis-6" declarations: (#<declaration property: flex-basis value: 6>)> #<rule selector: ".basis-7" declarations: (#<declaration property: flex-basis value: 7>)> #<rule selector: ".basis-8" declarations: (#<declaration property: flex-basis value: 8>)> #<rule selector: ".basis-9" declarations: (#<declaration property: flex-basis value: 9>)> #<rule selector: ".basis-10" declarations: (#<declaration property: flex-basis value: 10>)> #<rule selector: ".basis-12" declarations: (#<declaration property: flex-basis value: 12>)> #<rule selector: ".basis-14" declarations: (#<declaration property: flex-basis value: 14>)> #<rule selector: ".basis-16" declarations: (#<declaration property: flex-basis value: 16>)> #<rule selector: ".basis-20" declarations: (#<declaration property: flex-basis value: 20>)> #<rule selector: ".basis-24" declarations: (#<declaration property: flex-basis value: 24>)> #<rule selector: ".basis-28" declarations: (#<declaration property: flex-basis value: 28>)> #<rule selector: ".basis-32" declarations: (#<declaration property: flex-basis value: 32>)> #<rule selector: ".basis-48" declarations: (#<declaration property: flex-basis value: 48>)> #<rule selector: ".basis-64" declarations: (#<declaration property: flex-basis value: 64>)> #<rule selector: ".basis-72" declarations: (#<declaration property: flex-basis value: 72>)> #<rule selector: ".basis-90" declarations: (#<declaration property: flex-basis value: 90>)> #<rule selector: ".basis-96" declarations: (#<declaration property: flex-basis value: 96>)> #<rule selector: ".basis-100" declarations: (#<declaration property: flex-basis value: 100>)> #<rule selector: ".basis-128" declarations: (#<declaration property: flex-basis value: 128>)> #<rule selector: ".basis-196" declarations: (#<declaration property: flex-basis value: 196>)> #<rule selector: ".basis-256" declarations: (#<declaration property: flex-basis value: 256>)> #<rule selector: ".basis-512" declarations: (#<declaration property: flex-basis value: 512>)>)

Parameter: flex-directions ¶

Default value:

(#<rule selector: ".flex-row" declarations: (#<declaration property: flex-direction value: row>)> #<rule selector: ".flex-col" declarations: (#<declaration property: flex-direction value: column>)> #<rule selector: ".flex-row-reverse" declarations: (#<declaration property: flex-direction value: row-reverse>)> #<rule selector: ".flex-col-reverse" declarations: (#<declaration property: flex-direction value: column-reverse>)>)

Parameter: flex-grow ¶

Default value:

(#<rule selector: ".grow" declarations: (#<declaration property: flex-grow value: 1>)> #<rule selector: ".grow-0" declarations: (#<declaration property: flex-grow value: 0>)>)

Parameter: flex-justify-content ¶

Default value:

(#<rule selector: ".justify-start" declarations: (#<declaration property: justify-content value: flex-start>)> #<rule selector: ".justify-end" declarations: (#<declaration property: justify-content value: flex-end>)> #<rule selector: ".justify-end-safe" declarations: (#<declaration property: justify-content value: "safe flex-end">)> #<rule selector: ".justify-center" declarations: (#<declaration property: justify-content value: center>)> #<rule selector: ".justify-center-safe" declarations: (#<declaration property: justify-content value: "safe center">)> #<rule selector: ".justify-between" declarations: (#<declaration property: justify-content value: space-between>)> #<rule selector: ".justify-around" declarations: (#<declaration property: justify-content value: space-around>)> #<rule selector: ".justify-evenly" declarations: (#<declaration property: justify-content value: space-evenly>)> #<rule selector: ".justify-stretch" declarations: (#<declaration property: justify-content value: stretch>)> #<rule selector: ".justify-baseline" declarations: (#<declaration property: justify-content value: baseline>)> #<rule selector: ".justify-normal" declarations: (#<declaration property: justify-content value: normal>)>)

Parameter: flex-justify-items ¶

Default value:

(#<rule selector: ".justify-items-start" declarations: (#<declaration property: justify-items value: start>)> #<rule selector: ".justify-items-end" declarations: (#<declaration property: justify-items value: end>)> #<rule selector: ".justify-items-end-safe" declarations: (#<declaration property: justify-items value: "safe end">)> #<rule selector: ".justify-items-center" declarations: (#<declaration property: justify-items value: center>)> #<rule selector: ".justify-items-center-safe" declarations: (#<declaration property: justify-items value: "safe center">)> #<rule selector: ".justify-items-stretch" declarations: (#<declaration property: justify-items value: stretch>)> #<rule selector: ".justify-items-normal" declarations: (#<declaration property: justify-items value: normal>)>)

Parameter: flex-justify-self ¶

Default value:

(#<rule selector: ".justify-self-auto" declarations: (#<declaration property: justify-self value: auto>)> #<rule selector: ".justify-self-start" declarations: (#<declaration property: justify-self value: start>)> #<rule selector: ".justify-self-center" declarations: (#<declaration property: justify-self value: center>)> #<rule selector: ".justify-self-center-safe" declarations: (#<declaration property: justify-self value: "safe center">)> #<rule selector: ".justify-self-end" declarations: (#<declaration property: justify-self value: end>)> #<rule selector: ".justify-self-end-safe" declarations: (#<declaration property: justify-self value: "safe end">)> #<rule selector: ".justify-self-stretch" declarations: (#<declaration property: justify-self value: stretch>)>)

Parameter: flex-place-content ¶

Default value:

(#<rule selector: ".place-content-center" declarations: (#<declaration property: place-content value: center>)> #<rule selector: ".place-content-center-safe" declarations: (#<declaration property: place-content value: "safe center">)> #<rule selector: ".place-content-start" declarations: (#<declaration property: place-content value: start>)> #<rule selector: ".place-content-end" declarations: (#<declaration property: place-content value: end>)> #<rule selector: ".place-content-end-safe" declarations: (#<declaration property: place-content value: "safe end">)> #<rule selector: ".place-content-between" declarations: (#<declaration property: place-content value: space-between>)> #<rule selector: ".place-content-around" declarations: (#<declaration property: place-content value: space-around>)> #<rule selector: ".place-content-evenly" declarations: (#<declaration property: place-content value: space-evenly>)> #<rule selector: ".place-content-baseline" declarations: (#<declaration property: place-content value: baseline>)> #<rule selector: ".place-content-stretch" declarations: (#<declaration property: place-content value: stretch>)>)

Parameter: flex-place-items ¶

Default value:

(#<rule selector: ".place-items-start" declarations: (#<declaration property: place-items value: start>)> #<rule selector: ".place-items-end" declarations: (#<declaration property: place-items value: end>)> #<rule selector: ".place-items-end-safe" declarations: (#<declaration property: place-items value: "safe end">)> #<rule selector: ".place-items-center" declarations: (#<declaration property: place-items value: center>)> #<rule selector: ".place-items-center-safe" declarations: (#<declaration property: place-items value: "safe center">)> #<rule selector: ".place-items-baseline" declarations: (#<declaration property: place-items value: baseline>)> #<rule selector: ".place-items-stretch" declarations: (#<declaration property: place-items value: stretch>)>)

Parameter: flex-place-self ¶

Default value:

(#<rule selector: ".place-self-auto" declarations: (#<declaration property: place-self value: auto>)> #<rule selector: ".place-self-start" declarations: (#<declaration property: place-self value: start>)> #<rule selector: ".place-self-end" declarations: (#<declaration property: place-self value: end>)> #<rule selector: ".place-self-end-safe" declarations: (#<declaration property: place-self value: "safe end">)> #<rule selector: ".place-self-center" declarations: (#<declaration property: place-self value: center>)> #<rule selector: ".place-self-center-safe" declarations: (#<declaration property: place-self value: "safe center">)> #<rule selector: ".place-self-stretch" declarations: (#<declaration property: place-self value: stretch>)>)

Parameter: flex-shrink ¶

Default value:

(#<rule selector: ".shrink" declarations: (#<declaration property: flex-shrink value: 1>)> #<rule selector: ".shrink-0" declarations: (#<declaration property: flex-shrink value: 0>)>)

Parameter: flex-wrap ¶

Default value:

(#<rule selector: ".flex-nowrap" declarations: (#<declaration property: flex-wrap value: nowrap>)> #<rule selector: ".flex-wrap" declarations: (#<declaration property: flex-wrap value: wrap>)> #<rule selector: ".flex-wrap-reverse" declarations: (#<declaration property: flex-wrap value: wrap-reverse>)>)

Parameter: flexbox-classes ¶

Default value:

((#<rule selector: ".basis-2xs" declarations: (#<declaration property: flex-basis value: 1>)> #<rule selector: ".basis-xs" declarations: (#<declaration property: flex-basis value: 2>)> #<rule selector: ".basis-sm" declarations: (#<declaration property: flex-basis value: 3>)> #<rule selector: ".basis-md" declarations: (#<declaration property: flex-basis value: 4>)> #<rule selector: ".basis-lg" declarations: (#<declaration property: flex-basis value: 5>)> #<rule selector: ".basis-xl" declarations: (#<declaration property: flex-basis value: 6>)> #<rule selector: ".basis-2xl" declarations: (#<declaration property: flex-basis value: 7>)> #<rule selector: ".basis-3xl" declarations: (#<declaration property: flex-basis value: 8>)> #<rule selector: ".basis-4xl" declarations: (#<declaration property: flex-basis value: 9>)> #<rule selector: ".basis-5xl" declarations: (#<declaration property: flex-basis value: 10>)> #<rule selector: ".basis-1" declarations: (#<declaration property: flex-basis value: 1>)> #<rule selector: ".basis-2" declarations: (#<declaration property: flex-basis value: 2>)> #<rule selector: ".basis-3" declarations: (#<declaration property: flex-basis value: 3>)> #<rule selector: ".basis-4" declarations: (#<declaration property: flex-basis value: 4>)> #<rule selector: ".basis-5" declarations: (#<declaration property: flex-basis value: 5>)> #<rule selector: ".basis-6" declarations: (#<declaration property: flex-basis value: 6>)> #<rule selector: ".basis-7" declarations: (#<declaration property: flex-basis value: 7>)> #<rule selector: ".basis-8" declarations: (#<declaration property: flex-basis value: 8>)> #<rule selector: ".basis-9" declarations: (#<declaration property: flex-basis value: 9>)> #<rule selector: ".basis-10" declarations: (#<declaration property: flex-basis value: 10>)> #<rule selector: ".basis-12" declarations: (#<declaration property: flex-basis value: 12>)> #<rule selector: ".basis-14" declarations: (#<declaration property: flex-basis value: 14>)> #<rule selector: ".basis-16" declarations: (#<declaration property: flex-basis value: 16>)> #<rule selector: ".basis-20" declarations: (#<declaration property: flex-basis value: 20>)> #<rule selector: ".basis-24" declarations: (#<declaration property: flex-basis value: 24>)> #<rule selector: ".basis-28" declarations: (#<declaration property: flex-basis value: 28>)> #<rule selector: ".basis-32" declarations: (#<declaration property: flex-basis value: 32>)> #<rule selector: ".basis-48" declarations: (#<declaration property: flex-basis value: 48>)> #<rule selector: ".basis-64" declarations: (#<declaration property: flex-basis value: 64>)> #<rule selector: ".basis-72" declarations: (#<declaration property: flex-basis value: 72>)> #<rule selector: ".basis-90" declarations: (#<declaration property: flex-basis value: 90>)> #<rule selector: ".basis-96" declarations: (#<declaration property: flex-basis value: 96>)> #<rule selector: ".basis-100" declarations: (#<declaration property: flex-basis value: 100>)> #<rule selector: ".basis-128" declarations: (#<declaration property: flex-basis value: 128>)> #<rule selector: ".basis-196" declarations: (#<declaration property: flex-basis value: 196>)> #<rule selector: ".basis-256" declarations: (#<declaration property: flex-basis value: 256>)> #<rule selector: ".basis-512" declarations: (#<declaration property: flex-basis value: 512>)>) (#<rule selector: ".place-content-center" declarations: (#<declaration property: place-content value: center>)> #<rule selector: ".place-content-center-safe" declarations: (#<declaration property: place-content value: "safe center">)> #<rule selector: ".place-content-start" declarations: (#<declaration property: place-content value: start>)> #<rule selector: ".place-content-end" declarations: (#<declaration property: place-content value: end>)> #<rule selector: ".place-content-end-safe" declarations: (#<declaration property: place-content value: "safe end">)> #<rule selector: ".place-content-between" declarations: (#<declaration property: place-content value: space-between>)> #<rule selector: ".place-content-around" declarations: (#<declaration property: place-content value: space-around>)> #<rule selector: ".place-content-evenly" declarations: (#<declaration property: place-content value: space-evenly>)> #<rule selector: ".place-content-baseline" declarations: (#<declaration property: place-content value: baseline>)> #<rule selector: ".place-content-stretch" declarations: (#<declaration property: place-content value: stretch>)>) (#<rule selector: ".place-items-start" declarations: (#<declaration property: place-items value: start>)> #<rule selector: ".place-items-end" declarations: (#<declaration property: place-items value: end>)> #<rule selector: ".place-items-end-safe" declarations: (#<declaration property: place-items value: "safe end">)> #<rule selector: ".place-items-center" declarations: (#<declaration property: place-items value: center>)> #<rule selector: ".place-items-center-safe" declarations: (#<declaration property: place-items value: "safe center">)> #<rule selector: ".place-items-baseline" declarations: (#<declaration property: place-items value: baseline>)> #<rule selector: ".place-items-stretch" declarations: (#<declaration property: place-items value: stretch>)>) (#<rule selector: ".place-self-auto" declarations: (#<declaration property: place-self value: auto>)> #<rule selector: ".place-self-start" declarations: (#<declaration property: place-self value: start>)> #<rule selector: ".place-self-end" declarations: (#<declaration property: place-self value: end>)> #<rule selector: ".place-self-end-safe" declarations: (#<declaration property: place-self value: "safe end">)> #<rule selector: ".place-self-center" declarations: (#<declaration property: place-self value: center>)> #<rule selector: ".place-self-center-safe" declarations: (#<declaration property: place-self value: "safe center">)> #<rule selector: ".place-self-stretch" declarations: (#<declaration property: place-self value: stretch>)>) (#<rule selector: ".justify-start" declarations: (#<declaration property: justify-content value: flex-start>)> #<rule selector: ".justify-end" declarations: (#<declaration property: justify-content value: flex-end>)> #<rule selector: ".justify-end-safe" declarations: (#<declaration property: justify-content value: "safe flex-end">)> #<rule selector: ".justify-center" declarations: (#<declaration property: justify-content value: center>)> #<rule selector: ".justify-center-safe" declarations: (#<declaration property: justify-content value: "safe center">)> #<rule selector: ".justify-between" declarations: (#<declaration property: justify-content value: space-between>)> #<rule selector: ".justify-around" declarations: (#<declaration property: justify-content value: space-around>)> #<rule selector: ".justify-evenly" declarations: (#<declaration property: justify-content value: space-evenly>)> #<rule selector: ".justify-stretch" declarations: (#<declaration property: justify-content value: stretch>)> #<rule selector: ".justify-baseline" declarations: (#<declaration property: justify-content value: baseline>)> #<rule selector: ".justify-normal" declarations: (#<declaration property: justify-content value: normal>)>) (#<rule selector: ".justify-items-start" declarations: (#<declaration property: justify-items value: start>)> #<rule selector: ".justify-items-end" declarations: (#<declaration property: justify-items value: end>)> #<rule selector: ".justify-items-end-safe" declarations: (#<declaration property: justify-items value: "safe end">)> #<rule selector: ".justify-items-center" declarations: (#<declaration property: justify-items value: center>)> #<rule selector: ".justify-items-center-safe" declarations: (#<declaration property: justify-items value: "safe center">)> #<rule selector: ".justify-items-stretch" declarations: (#<declaration property: justify-items value: stretch>)> #<rule selector: ".justify-items-normal" declarations: (#<declaration property: justify-items value: normal>)>) (#<rule selector: ".justify-self-auto" declarations: (#<declaration property: justify-self value: auto>)> #<rule selector: ".justify-self-start" declarations: (#<declaration property: justify-self value: start>)> #<rule selector: ".justify-self-center" declarations: (#<declaration property: justify-self value: center>)> #<rule selector: ".justify-self-center-safe" declarations: (#<declaration property: justify-self value: "safe center">)> #<rule selector: ".justify-self-end" declarations: (#<declaration property: justify-self value: end>)> #<rule selector: ".justify-self-end-safe" declarations: (#<declaration property: justify-self value: "safe end">)> #<rule selector: ".justify-self-stretch" declarations: (#<declaration property: justify-self value: stretch>)>) (#<rule selector: ".items-start" declarations: (#<declaration property: align-items value: flex-start>)> #<rule selector: ".items-end" declarations: (#<declaration property: align-items value: flex-end>)> #<rule selector: ".items-end-safe" declarations: (#<declaration property: align-items value: "safe flex-end">)> #<rule selector: ".items-center" declarations: (#<declaration property: align-items value: center>)> #<rule selector: ".items-center-safe" declarations: (#<declaration property: align-items value: "safe center">)> #<rule selector: ".items-baseline" declarations: (#<declaration property: align-items value: baseline>)> #<rule selector: ".items-baseline-last" declarations: (#<declaration property: align-items value: "last baseline">)> #<rule selector: ".items-stretch" declarations: (#<declaration property: align-items value: stretch>)>) (#<rule selector: ".self-auto" declarations: (#<declaration property: align-self value: auto>)> #<rule selector: ".self-start" declarations: (#<declaration property: align-self value: flex-start>)> #<rule selector: ".self-end" declarations: (#<declaration property: align-self value: flex-end>)> #<rule selector: ".self-end-safe" declarations: (#<declaration property: align-self value: "safe flex-end">)> #<rule selector: ".self-center" declarations: (#<declaration property: align-self value: center>)> #<rule selector: ".self-center-safe" declarations: (#<declaration property: align-self value: "safe center">)> #<rule selector: ".self-baseline" declarations: (#<declaration property: align-self value: baseline>)> #<rule selector: ".self-baseline-last" declarations: (#<declaration property: align-self value: "last baseline">)> #<rule selector: ".self-stretch" declarations: (#<declaration property: align-self value: stretch>)>) (#<rule selector: ".flex-row" declarations: (#<declaration property: flex-direction value: row>)> #<rule selector: ".flex-col" declarations: (#<declaration property: flex-direction value: column>)> #<rule selector: ".flex-row-reverse" declarations: (#<declaration property: flex-direction value: row-reverse>)> #<rule selector: ".flex-col-reverse" declarations: (#<declaration property: flex-direction value: column-reverse>)>) (#<rule selector: ".content-start" declarations: (#<declaration property: align-content value: flex-start>)> #<rule selector: ".content-end" declarations: (#<declaration property: align-content value: flex-end>)> #<rule selector: ".content-center" declarations: (#<declaration property: align-content value: center>)> #<rule selector: ".content-normal" declarations: (#<declaration property: align-content value: normal>)> #<rule selector: ".content-between" declarations: (#<declaration property: align-content value: space-between>)> #<rule selector: ".content-around" declarations: (#<declaration property: align-content value: space-around>)> #<rule selector: ".content-evenly" declarations: (#<declaration property: align-content value: space-evenly>)> #<rule selector: ".content-baseline" declarations: (#<declaration property: align-content value: baseline>)> #<rule selector: ".content-stretch" declarations: (#<declaration property: align-content value: stretch>)>) ((#<rule selector: ".flex-1" declarations: (#<declaration property: flex value: "1.00rem">)> #<rule selector: ".flex-2" declarations: (#<declaration property: flex value: "2.00rem">)> #<rule selector: ".flex-3" declarations: (#<declaration property: flex value: "3.00rem">)> #<rule selector: ".flex-4" declarations: (#<declaration property: flex value: "4.00rem">)> #<rule selector: ".flex-5" declarations: (#<declaration property: flex value: "5.00rem">)> #<rule selector: ".flex-6" declarations: (#<declaration property: flex value: "6.00rem">)> #<rule selector: ".flex-7" declarations: (#<declaration property: flex value: "7.00rem">)> #<rule selector: ".flex-8" declarations: (#<declaration property: flex value: "8.00rem">)> #<rule selector: ".flex-9" declarations: (#<declaration property: flex value: "9.00rem">)> #<rule selector: ".flex-10" declarations: (#<declaration property: flex value: "10.00rem">)> #<rule selector: ".flex-12" declarations: (#<declaration property: flex value: "12.00rem">)> #<rule selector: ".flex-14" declarations: (#<declaration property: flex value: "14.00rem">)> #<rule selector: ".flex-16" declarations: (#<declaration property: flex value: "16.00rem">)> #<rule selector: ".flex-20" declarations: (#<declaration property: flex value: "20.00rem">)> #<rule selector: ".flex-24" declarations: (#<declaration property: flex value: "24.00rem">)> #<rule selector: ".flex-28" declarations: (#<declaration property: flex value: "28.00rem">)> #<rule selector: ".flex-32" declarations: (#<declaration property: flex value: "32.00rem">)> #<rule selector: ".flex-48" declarations: (#<declaration property: flex value: "48.00rem">)> #<rule selector: ".flex-64" declarations: (#<declaration property: flex value: "64.00rem">)> #<rule selector: ".flex-72" declarations: (#<declaration property: flex value: "72.00rem">)> #<rule selector: ".flex-90" declarations: (#<declaration property: flex value: "90.00rem">)> #<rule selector: ".flex-96" declarations: (#<declaration property: flex value: "96.00rem">)> #<rule selector: ".flex-100" declarations: (#<declaration property: flex value: "100.00rem">)> #<rule selector: ".flex-128" declarations: (#<declaration property: flex value: "128.00rem">)> #<rule selector: ".flex-196" declarations: (#<declaration property: flex value: "196.00rem">)> #<rule selector: ".flex-256" declarations: (#<declaration property: flex value: "256.00rem">)> #<rule selector: ".flex-512" declarations: (#<declaration property: flex value: "512.00rem">)> #<rule selector: ".flex-2xs" declarations: (#<declaration property: flex value: "1.00rem">)> #<rule selector: ".flex-xs" declarations: (#<declaration property: flex value: "2.00rem">)> #<rule selector: ".flex-sm" declarations: (#<declaration property: flex value: "3.00rem">)> #<rule selector: ".flex-md" declarations: (#<declaration property: flex value: "4.00rem">)> #<rule selector: ".flex-lg" declarations: (#<declaration property: flex value: "5.00rem">)> #<rule selector: ".flex-xl" declarations: (#<declaration property: flex value: "6.00rem">)> #<rule selector: ".flex-2xl" declarations: (#<declaration property: flex value: "7.00rem">)> #<rule selector: ".flex-3xl" declarations: (#<declaration property: flex value: "8.00rem">)> #<rule selector: ".flex-4xl" declarations: (#<declaration property: flex value: "9.00rem">)> #<rule selector: ".flex-5xl" declarations: (#<declaration property: flex value: "10.00rem">)>) (#<rule selector: ".flex-2\\/3" declarations: (#<declaration property: flex value: "66.6%">)> #<rule selector: ".flex-1\\/2" declarations: (#<declaration property: flex value: "50%">)> #<rule selector: ".flex-1\\/3" declarations: (#<declaration property: flex value: "33.3%">)> #<rule selector: ".flex-1\\/4" declarations: (#<declaration property: flex value: "25%">)> #<rule selector: ".flex-1\\/5" declarations: (#<declaration property: flex value: "20%">)> #<rule selector: ".flex-1\\/6" declarations: (#<declaration property: flex value: "16.6%">)> #<rule selector: ".flex-1\\/8" declarations: (#<declaration property: flex value: "12.5%">)>) (#<rule selector: ".flex-initial" declarations: (#<declaration property: flex value: "0 auto">)> #<rule selector: ".flex-none" declarations: (#<declaration property: flex value: none>)> #<rule selector: ".flex-auto" declarations: (#<declaration property: flex value: auto>)>)) (#<rule selector: ".order-1" declarations: (#<declaration property: order value: 1>)> #<rule selector: ".order-2" declarations: (#<declaration property: order value: 2>)> #<rule selector: ".order-3" declarations: (#<declaration property: order value: 3>)> #<rule selector: ".order-4" declarations: (#<declaration property: order value: 4>)> #<rule selector: ".order-5" declarations: (#<declaration property: order value: 5>)> #<rule selector: ".order-6" declarations: (#<declaration property: order value: 6>)> #<rule selector: ".order-7" declarations: (#<declaration property: order value: 7>)> #<rule selector: ".order-8" declarations: (#<declaration property: order value: 8>)> #<rule selector: ".order-9" declarations: (#<declaration property: order value: 9>)> #<rule selector: ".order-10" declarations: (#<declaration property: order value: 10>)> #<rule selector: ".order-12" declarations: (#<declaration property: order value: 12>)> #<rule selector: ".order-14" declarations: (#<declaration property: order value: 14>)> #<rule selector: ".order-16" declarations: (#<declaration property: order value: 16>)> #<rule selector: ".order-20" declarations: (#<declaration property: order value: 20>)> #<rule selector: ".order-24" declarations: (#<declaration property: order value: 24>)> #<rule selector: ".order-28" declarations: (#<declaration property: order value: 28>)> #<rule selector: ".order-32" declarations: (#<declaration property: order value: 32>)> #<rule selector: ".order-48" declarations: (#<declaration property: order value: 48>)> #<rule selector: ".order-64" declarations: (#<declaration property: order value: 64>)> #<rule selector: ".order-72" declarations: (#<declaration property: order value: 72>)> #<rule selector: ".order-90" declarations: (#<declaration property: order value: 90>)> #<rule selector: ".order-96" declarations: (#<declaration property: order value: 96>)> #<rule selector: ".order-100" declarations: (#<declaration property: order value: 100>)> #<rule selector: ".order-128" declarations: (#<declaration property: order value: 128>)> #<rule selector: ".order-196" declarations: (#<declaration property: order value: 196>)> #<rule selector: ".order-256" declarations: (#<declaration property: order value: 256>)> #<rule selector: ".order-512" declarations: (#<declaration property: order value: 512>)> #<rule selector: ".order-first" declarations: (#<declaration property: order value: -9999>)> #<rule selector: ".order-last" declarations: (#<declaration property: order value: 9999>)> #<rule selector: ".order-none" declarations: (#<declaration property: order value: 0>)>) (#<rule selector: ".shrink" declarations: (#<declaration property: flex-shrink value: 1>)> #<rule selector: ".shrink-0" declarations: (#<declaration property: flex-shrink value: 0>)>) (#<rule selector: ".grow" declarations: (#<declaration property: flex-grow value: 1>)> #<rule selector: ".grow-0" declarations: (#<declaration property: flex-grow value: 0>)>) (#<rule selector: ".gap-1" declarations: (#<declaration property: gap value: "0.30rem">)> #<rule selector: ".gap-2" declarations: (#<declaration property: gap value: "0.60rem">)> #<rule selector: ".gap-3" declarations: (#<declaration property: gap value: "0.90rem">)> #<rule selector: ".gap-4" declarations: (#<declaration property: gap value: "1.20rem">)> #<rule selector: ".gap-5" declarations: (#<declaration property: gap value: "1.50rem">)> #<rule selector: ".gap-6" declarations: (#<declaration property: gap value: "1.80rem">)> #<rule selector: ".gap-7" declarations: (#<declaration property: gap value: "2.10rem">)> #<rule selector: ".gap-8" declarations: (#<declaration property: gap value: "2.40rem">)> #<rule selector: ".gap-9" declarations: (#<declaration property: gap value: "2.70rem">)> #<rule selector: ".gap-10" declarations: (#<declaration property: gap value: "3.00rem">)> #<rule selector: ".gap-12" declarations: (#<declaration property: gap value: "3.60rem">)> #<rule selector: ".gap-14" declarations: (#<declaration property: gap value: "4.20rem">)> #<rule selector: ".gap-16" declarations: (#<declaration property: gap value: "4.80rem">)> #<rule selector: ".gap-20" declarations: (#<declaration property: gap value: "6.00rem">)> #<rule selector: ".gap-24" declarations: (#<declaration property: gap value: "7.20rem">)> #<rule selector: ".gap-28" declarations: (#<declaration property: gap value: "8.40rem">)> #<rule selector: ".gap-32" declarations: (#<declaration property: gap value: "9.60rem">)> #<rule selector: ".gap-48" declarations: (#<declaration property: gap value: "14.40rem">)> #<rule selector: ".gap-64" declarations: (#<declaration property: gap value: "19.20rem">)> #<rule selector: ".gap-72" declarations: (#<declaration property: gap value: "21.60rem">)> #<rule selector: ".gap-90" declarations: (#<declaration property: gap value: "27.00rem">)> #<rule selector: ".gap-96" declarations: (#<declaration property: gap value: "28.80rem">)> #<rule selector: ".gap-100" declarations: (#<declaration property: gap value: "30.00rem">)> #<rule selector: ".gap-128" declarations: (#<declaration property: gap value: "38.40rem">)> #<rule selector: ".gap-196" declarations: (#<declaration property: gap value: "58.80rem">)> #<rule selector: ".gap-256" declarations: (#<declaration property: gap value: "76.80rem">)> #<rule selector: ".gap-512" declarations: (#<declaration property: gap value: "153.60rem">)> #<rule selector: ".gap-2xs" declarations: (#<declaration property: gap value: "0.30rem">)> #<rule selector: ".gap-xs" declarations: (#<declaration property: gap value: "0.60rem">)> #<rule selector: ".gap-sm" declarations: (#<declaration property: gap value: "0.90rem">)> #<rule selector: ".gap-md" declarations: (#<declaration property: gap value: "1.20rem">)> #<rule selector: ".gap-lg" declarations: (#<declaration property: gap value: "1.50rem">)> #<rule selector: ".gap-xl" declarations: (#<declaration property: gap value: "1.80rem">)> #<rule selector: ".gap-2xl" declarations: (#<declaration property: gap value: "2.10rem">)> #<rule selector: ".gap-3xl" declarations: (#<declaration property: gap value: "2.40rem">)> #<rule selector: ".gap-4xl" declarations: (#<declaration property: gap value: "2.70rem">)> #<rule selector: ".gap-5xl" declarations: (#<declaration property: gap value: "3.00rem">)>) (#<rule selector: ".flex-nowrap" declarations: (#<declaration property: flex-wrap value: nowrap>)> #<rule selector: ".flex-wrap" declarations: (#<declaration property: flex-wrap value: wrap>)> #<rule selector: ".flex-wrap-reverse" declarations: (#<declaration property: flex-wrap value: wrap-reverse>)>))

Parameter: gap ¶

Default value:

(#<rule selector: ".gap-1" declarations: (#<declaration property: gap value: "0.30rem">)> #<rule selector: ".gap-2" declarations: (#<declaration property: gap value: "0.60rem">)> #<rule selector: ".gap-3" declarations: (#<declaration property: gap value: "0.90rem">)> #<rule selector: ".gap-4" declarations: (#<declaration property: gap value: "1.20rem">)> #<rule selector: ".gap-5" declarations: (#<declaration property: gap value: "1.50rem">)> #<rule selector: ".gap-6" declarations: (#<declaration property: gap value: "1.80rem">)> #<rule selector: ".gap-7" declarations: (#<declaration property: gap value: "2.10rem">)> #<rule selector: ".gap-8" declarations: (#<declaration property: gap value: "2.40rem">)> #<rule selector: ".gap-9" declarations: (#<declaration property: gap value: "2.70rem">)> #<rule selector: ".gap-10" declarations: (#<declaration property: gap value: "3.00rem">)> #<rule selector: ".gap-12" declarations: (#<declaration property: gap value: "3.60rem">)> #<rule selector: ".gap-14" declarations: (#<declaration property: gap value: "4.20rem">)> #<rule selector: ".gap-16" declarations: (#<declaration property: gap value: "4.80rem">)> #<rule selector: ".gap-20" declarations: (#<declaration property: gap value: "6.00rem">)> #<rule selector: ".gap-24" declarations: (#<declaration property: gap value: "7.20rem">)> #<rule selector: ".gap-28" declarations: (#<declaration property: gap value: "8.40rem">)> #<rule selector: ".gap-32" declarations: (#<declaration property: gap value: "9.60rem">)> #<rule selector: ".gap-48" declarations: (#<declaration property: gap value: "14.40rem">)> #<rule selector: ".gap-64" declarations: (#<declaration property: gap value: "19.20rem">)> #<rule selector: ".gap-72" declarations: (#<declaration property: gap value: "21.60rem">)> #<rule selector: ".gap-90" declarations: (#<declaration property: gap value: "27.00rem">)> #<rule selector: ".gap-96" declarations: (#<declaration property: gap value: "28.80rem">)> #<rule selector: ".gap-100" declarations: (#<declaration property: gap value: "30.00rem">)> #<rule selector: ".gap-128" declarations: (#<declaration property: gap value: "38.40rem">)> #<rule selector: ".gap-196" declarations: (#<declaration property: gap value: "58.80rem">)> #<rule selector: ".gap-256" declarations: (#<declaration property: gap value: "76.80rem">)> #<rule selector: ".gap-512" declarations: (#<declaration property: gap value: "153.60rem">)> #<rule selector: ".gap-2xs" declarations: (#<declaration property: gap value: "0.30rem">)> #<rule selector: ".gap-xs" declarations: (#<declaration property: gap value: "0.60rem">)> #<rule selector: ".gap-sm" declarations: (#<declaration property: gap value: "0.90rem">)> #<rule selector: ".gap-md" declarations: (#<declaration property: gap value: "1.20rem">)> #<rule selector: ".gap-lg" declarations: (#<declaration property: gap value: "1.50rem">)> #<rule selector: ".gap-xl" declarations: (#<declaration property: gap value: "1.80rem">)> #<rule selector: ".gap-2xl" declarations: (#<declaration property: gap value: "2.10rem">)> #<rule selector: ".gap-3xl" declarations: (#<declaration property: gap value: "2.40rem">)> #<rule selector: ".gap-4xl" declarations: (#<declaration property: gap value: "2.70rem">)> #<rule selector: ".gap-5xl" declarations: (#<declaration property: gap value: "3.00rem">)>)

Parameter: gap-multiplier ¶

Default value:

0.3

Parameter: order ¶

Default value:

(#<rule selector: ".order-1" declarations: (#<declaration property: order value: 1>)> #<rule selector: ".order-2" declarations: (#<declaration property: order value: 2>)> #<rule selector: ".order-3" declarations: (#<declaration property: order value: 3>)> #<rule selector: ".order-4" declarations: (#<declaration property: order value: 4>)> #<rule selector: ".order-5" declarations: (#<declaration property: order value: 5>)> #<rule selector: ".order-6" declarations: (#<declaration property: order value: 6>)> #<rule selector: ".order-7" declarations: (#<declaration property: order value: 7>)> #<rule selector: ".order-8" declarations: (#<declaration property: order value: 8>)> #<rule selector: ".order-9" declarations: (#<declaration property: order value: 9>)> #<rule selector: ".order-10" declarations: (#<declaration property: order value: 10>)> #<rule selector: ".order-12" declarations: (#<declaration property: order value: 12>)> #<rule selector: ".order-14" declarations: (#<declaration property: order value: 14>)> #<rule selector: ".order-16" declarations: (#<declaration property: order value: 16>)> #<rule selector: ".order-20" declarations: (#<declaration property: order value: 20>)> #<rule selector: ".order-24" declarations: (#<declaration property: order value: 24>)> #<rule selector: ".order-28" declarations: (#<declaration property: order value: 28>)> #<rule selector: ".order-32" declarations: (#<declaration property: order value: 32>)> #<rule selector: ".order-48" declarations: (#<declaration property: order value: 48>)> #<rule selector: ".order-64" declarations: (#<declaration property: order value: 64>)> #<rule selector: ".order-72" declarations: (#<declaration property: order value: 72>)> #<rule selector: ".order-90" declarations: (#<declaration property: order value: 90>)> #<rule selector: ".order-96" declarations: (#<declaration property: order value: 96>)> #<rule selector: ".order-100" declarations: (#<declaration property: order value: 100>)> #<rule selector: ".order-128" declarations: (#<declaration property: order value: 128>)> #<rule selector: ".order-196" declarations: (#<declaration property: order value: 196>)> #<rule selector: ".order-256" declarations: (#<declaration property: order value: 256>)> #<rule selector: ".order-512" declarations: (#<declaration property: order value: 512>)> #<rule selector: ".order-first" declarations: (#<declaration property: order value: -9999>)> #<rule selector: ".order-last" declarations: (#<declaration property: order value: 9999>)> #<rule selector: ".order-none" declarations: (#<declaration property: order value: 0>)>)