Add Flex Direction Reverse Values

[johnsicili]

Currently Webstudio supports Flex direction row and column. But there are two other allowed values (and super useful) which are row-reverse and column-reverse. See docs for more.

Use Case

Section 1 on desktop has an image on the left and text on the right.
Section 2 on desktop has an image on the right and text on the left. (Opposite of section 1).

When the breakpoint goes to small, the sections will be vertical and look like this: image, text, text, image (two texts back to back)

By setting the first section's direction to be column-reverse the output will now be: text, image, text image.

Workaround

You can set the child's order but it's preferred to manage this from the parent (and there are probably use cases where you need to manage it from the parent).

[kof]

@taylornowotny remember we were thinking those reverse orders were not critical enough to complicate the UI? This sounds like a valid use case ... idk

[taylornowotny]

@kof Yes I actually updated the design but it wasn't built, don't remember why.

[taylornowotny]

https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?type=design&node-id=253%3A33586&mode=design&t=EAskFXVqDMhFURIe-1

[taylornowotny]

I looked but I don't see this in any existing issues. I'll go ahead an make an issue for this update

[taylornowotny]

webstudio-is/webstudio#2314