[ad_1]
introduction
In the previous article, we explored the basic design components such as filling, margin and spacing. Now, let’s take a leap to a more advanced component: flexlayout. However, we can create flexible flexible layouts with any screen, thanks to the power of CSS Flexbox.
Flexlayout: Flexible container
Flexlayout is a container that allows us to organize the components flexible, control the alignment, size and arrangement.
It inherits from the FlexcomPonent interface, just like horizontal and vertical layouts, which means that we can use the same properties to customize its behavior.
Main Features:
- Flexibility in organizing components.
- Control of alignment, size and arrangement.
- Inheritance from the FlexcomPonent interface.
The basic flexlayout properties
-
Flexible direction: Determines the main direction of planning, which can be the row, reverse row, column, or reverse column.
-
Content justification: Align the components on the main axis, control the distribution of free space.
-
Alignment of the elements: Align the components on the cross axis.
-
Self alignment: Align an individual component on the cross axis.
-
The relative size, flexible shrinkage, and flexible growth
-
The relative size: It allows you to determine the size of a component in relation to the mother container.
-
Flexible shrinkage: It controls the ability of a shrinkage to suit the container.
-
Flexible: It controls the ability to grow to occupy the free space in the container.
- Wrap and alignment content
-
Wrap: The components allow separation to new lines when there is not enough space in the container.
-
Align the content: It corresponds to the ingredients lines on the cross axis, controlling the distribution of the free distance between the lines.
Gold Tip: Lumo and Flexlayout
Lumo, Vaadin Design System, provides a rich set of CSS tools that make creating easy elastic layouts.
With Lumo, we can apply FlexBox properties directly to the ingredients without writing a custom CSS.
- LUMO Categories Simplify Design Design.
- Vaadin documents provide practical examples of LOMO use with Flexlayout.
- Explore the benefit chapters for spacing and align.
conclusion
Flexlayout is a strong component that allows us to create flexible and adaptive layouts. in
Slip: This content does not aim to cover the topic comprehensively, because it depends on my studies and notes during this process. I recommend consulting the original sources for a more deepening understanding of the topic.
Authors
Paulo Ba is a “approved Java developer from Oracle” and “Spring Certified PROFESSIONAL” with a deep passion for Vadin. He drafted UIS with Vidin and strives to make it a major frame for the front facility of full Java developers worldwide. He loves teaching, sharing knowledge, and creating content. While it has learning theory through certificates, it always calls for a practical approach.
- Linkin.com/in/pbalves
- x.com/p_B_Alves
- mastodon.social/@pbalves
Employee writer: Fábio Ap is technology lovers, the writer who studies selfly, and the science of society with technology. A passion for sharing ideas, it provides reliable views on how technology forms our lives. Through clear and accurate writing, Fábio simplifies complex topics, enabling readers to move in the digital age with confidence.
. Medium.com/@fabioApe
