Divide Reverse

Reverse border side for flex-reverse

Syntax

visual="divide-{x|y}:reverse"

Values

Value	CSS Output	Description
divide-x:reverse	--ss-divide-x-reverse: 1	Reverse X-axis divider
divide-y:reverse	--ss-divide-y-reverse: 1	Reverse Y-axis divider

Examples

<div layout="flex flex-row-reverse" visual="divide-x:gray-300 divide-x-w:thin divide-x:reverse">
<div layout="flex flex-col-reverse" visual="divide-y:gray-300 divide-y-w:thin divide-y:reverse">

Preview

Reverse vs Normal

visual="divide-x:reverse" - Comparison of normal flow vs reverse flow dividers

1

2

3

1(R)

2(R)

3(R)

View Code

<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div layout="flex" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
    <div space="p:small">1</div>
    <div space="p:small">2</div>
    <div space="p:small">3</div>
  </div>
  <div layout="flex row-reverse" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-x:reverse">
    <div space="p:small">1(R)</div>
    <div space="p:small">2(R)</div>
    <div space="p:small">3(R)</div>
  </div>
</div>