The problem of flex-direction: row-reverse to change items order

[aweell]

Using flex-direction: row-reverse

For some components, we are currently using the CSS property flex-direction set to row-reverse to change items order (Button, switch, checkbox, radio...)

The switch component problem

In cases like the switch (I'm not sure if this is happening in other components), using this property is causing that when the size: fillParent is defined, the component has a right alignment.

Fig. 1 - Changing the size of the switch to fillParent

This is not the expected behavior

A solution: using order property

Fig. 2 - Adding order: 1 to the label span will keep the elements left aligned and add the block behavior when the size is set to fillParent

Changing the order of the elements that are direct children of a flex container could solve this issue providing the same functionality.

Accessibility concerns

Both approaches have the same problem, using them creates a disconnection between the visual presentation and the DOM order... I'm not sure if in the cases we are currently using the row-reverse property, it has an impact on accessibility.

An accessible solution

Reorder the elements depending on the prop value

This approach will maintain consistency between the DOM order and the visual presentation.

References

• order CSS property
• flex-direction CSS property