Master Vaadin VerticalLayout and HorizontalLayout - layouts in Vaadin Flow

In this tutorial, Marcus Hellberg teaches you everything you need to know about Vaadin Flow's VerticalLayout and HorizontalLayout. You can build essentially any kind of layout with these two building blocks.
TIP: Use the Vaadin Reference Card to quickly look up layouts while developing vaadin.com/vaadin-reference-card
0:00 - Intro
0:05 - What you'll learn
0:35 - Spacing, padding, and margin
2:46 - Sizing layouts
4:07 - Justifying components along the main axis
6:09 - Aligning items along the cross-axis
11:20 - Creating a gap between components
13:00 - Using flex and expand to grow items
15:03 - Building a complex layout with HorizontalLayout and VerticalLayout
20:06 - Outro

[@user-us8qs1vq4s]

Very detail about vaadin's VerticalLayout and HorizontalLayout. Thanks a lot, Marcus.

[@simonmartinelli]

Very helpful tutorial, thanks Marcus!

[@vaadinofficial]

Thanks Simon!

[@frueskens]

Now I finally got it all because of your good stuff - thx!

[@vaadinofficial]

Glad to hear that. Pretty much any layout out there can be broken down into nested horizontal and vertical layouts, so you should now be able to create almost anything you want :)

[@braulioarencibia7407]

awesome. Thank you!

[@vaadinofficial]

Glad you liked it!

[@ricardocantillo2042]

Just as need.!

[@timomeinen-softwarepilot6372]

Thank you for the video. At 1:06 you reference the CSS file but I do not see a @CssImport at the view. Is there a naming convention or how does the CSS becomes available to the view?

[@vaadinofficial]

It's using the new theme functionality introduced in Vaadin 19 and 14.6

[@gennarogiaquinto3931]

Very helpful. Can you tell me what software do you use for looking at the page updates in real time while coding?

[@vaadinofficial]

I'm not using any additional software, just the Spring Boot devtools that are included with the starter.

[@gennarogiaquinto3931]

@@vaadinofficial oh, ok! I tried it, but in any case with Java code modifications I still have to rebuild project, is it right?

[@MilsonPazienza]

This vaadin should replace thymeleaf it will make our lives easy as Java dev