Add Flex Layout documentation

[HerbertsVaadin]

Solves
#2124

[github-actions]

AI Language Review

HTML Elements

1. In the Components table, the new FlexLayout entry uses notation "div + display:flex". This could be clarified by specifying it's a Div with the display property set to flex. The addition of "Includes 'Flexbox' specific Flow API" is informative but should ensure alignment with the rest of the style in the document.

2. In the "Important Considerations" section under "Html Component", the phrase "Last thing to consider" could be rephrased for a more professional tone, such as "Finally, note that..."

3. In the "Flex Layout Component" section, the recommendation to use "Horizontal Layout" and "Vertical Layout" instead of "Flex Layout" is contradicted by the following text which suggests the use of "Flex Layout" primarily for backward compatibility. The section should have a consistent message regarding best practices.

Ensure that the terminology and phrasing are consistent throughout the document for clarity and cohesion.

[rolfsmeds]

We're actually trying to get away from the need for FlexLayout entirely, so I'm not sure we want to now start promoting it like this. HL now has native support for wrapping, so the only feature it has that HL and VL lacks is setDirection.

[HerbertsVaadin]

We're actually trying to get away from the need for FlexLayout entirely, so I'm not sure we want to now start promoting it like this. HL now has native support for wrapping, so the only feature it has that HL and VL lacks is setDirection.

@rolfsmeds I guess for HL and VL it would only make sense to have "reverse" direct changes, but a use case where you'd want to switch between HL and VL isn't covered I guess.

Wondering if it would be useful to add a disclamer on top, that the user should prefer to use HL or VL instead of this component, unless they have some specific scenario where the direction change is necessary?
Just brainstorming, that "Flex" is more recognizable than "horizontal layout" or "vertical layout" for outside people, so a page for it could funnel the user to the right component?

Since its not a deprecated component, feels like it should be documented.

[rolfsmeds]

Even for scenarios where direction change is needed, I think it makes more sense to use utility classes or just plain css with a div (or one of the layouts, since those are also really just flexboxen), since you typically want to change other properties as well (e.g. justification and alignment) when you change orientation.

We could also consider including FlexLayout on the HTML Elements page, as it's really just a div with some inline css.

[HerbertsVaadin]

@rolfsmeds
Sure, HTML Elements page makes sense, I can rework this PR into that.
I could write up a much smaller summary, as a separate section that page, similar to how HTML Container has a separate section. Or should it be only only a table entry?

[rolfsmeds]

I think a separate section like for the Html class would make sense.

[HerbertsVaadin]

@rolfsmeds I have now refactored it, please take a look at the new version, when you can.