The Switcher

...

The switcher is a flexbox which display its elements in a row and at a specific width its layout change from row to column.

You don't have to use any media queries and the breakpoint is not based on the screen width, but on the switcher width!

threshold: is a width value representing the switcher breakpoint.
gap: the space between child elements.
twin-width: give the same width to every child.
layout: let you define the width of each child.
reverse: change the order of the elements when wrapped (the last child will be on top, and the first one on the bottom)

Examples

Try to resize the switcher bellow and you will see that at 500px, its layout will switch from row to column.

element 1

element 2

Using twin-width all the childrens of the switcher will have a equal width.

element lorem ipsum dolor sit

element 2

element 3

The layout attribute, let you define the size of every child.

The syntax is really intuitive. You define the size of the element from the first to the last in order separating the values with "|".

If you don't define the width of every child, the other ones will fill the remaining space.

So, for example in a switcher that have 3 children:

- layout="1/4|1/2|1/4" : this will give 1/4 of the switcher to the first and last element, and 1/2 to the second one.

- layout="|1/2|" : this is equal to the previous one, because the second element will take half of the width, and the others will take the remaining space (so 1/4 each)

- layout="||1/2" : in this case, the first and second element take the remaining space (1/4 each) and the last elements width is 1/2 of the switcher width.

element 1

element 2

element 3