When would I use a Div vs a FlexLayout?
My understanding is that a Div behaves exactly like an HTML <div/>, and as such requires CSS styles to apply layout. And my understanding is that a FlexLayout also needs to be styled with CSS to apply layout. So why the discrepancy between the two? Is there ever a specific reason to use either of them?
FlexLayout has some server-side Java methods for setting FlexBox properties. You can set the same properties through CSS as well, if that’s what you prefer. If you like to minimize the CSS stylings in your app, then in that case FlexLayout is better. FlexLayout also extends Component, which comes with its own helper methods, like getChildren(), onAttach(), onDetach() and so on.
OK, thanks @Ollie, that makes sense. So let’s say I prefer server-side and try to stay away from CSS as much as possible…is there anything that Div offers me that I can’t accomplish with FlexLayout?
In which use case?
All of them? Seriously!
In other words, as someone who prefers server-side APIs and not writing CSS, when would I use a Div instead of a FlexBoxLayout?
If you could provide me with a concrete example (any use case) I think I could make sense of it – thanks again for all your help!
A Div is a <div> element. It doesn’t need to be a layout. It could be a wrapper or a colored indicator with no content or something.
Ahhh ok, thanks @Ollie, so I think this is the root of my question: what is the difference between a “div” and a “layout” in Vaadin?
It sounds like a “div” (<div/> under the hood) is just a wrapper to apply stylings to. It could be used for laying things out and positioning them, but like you said, it could also just be used for applying a color or border to its contents.
And it sounds like a layout (FlexLayout, HorizontalLayout, etc.) is used specifically for positioning and laying its contents out, not for applying other types of stylings (colors, borders, etc.) to them.
Is this a fair summary of “div vs. layout” in your mind? Thanks again!
Sure. It’s all about the server-side Java API, like I mentioned in my first response. A Div is a plain element with only element-related things, like css class names. A Layout component has Java methods for setting layouting-related features.