Developing with OutSystems
Ever wondered how websites arrange content so neatly, whether it's side-by-side, stacked up, or centered? Well, a big part of that magic comes from something called "Flexbox" in web design. In OutSystems, they make it super easy with “Flex Classes.”
Think of Flex Classes are handy tools or pre-made instructions that help you arrange items on your screen, like photos, text, or buttons, in a really flexible way. You don't need to write complex code; you just apply these classes, and OutSystems handles the rest.
The main goal of this guide is to help you understand how these classes work and find the right combination for whatever design you're trying to achieve.
The foundation
Before any of the other cool Flex Classes can work their magic, you need to tell OutSystems that a particular section of your page is going to be a “flex container” by applying the display-flex class. It's like turning a regular box into a “smart box” that knows how to arrange its contents automatically.
Once you've made your container a flex container, you can start using other classes to control how the items inside behave.
How do you line things up?
Let’s take a look.
Align Items
This set of classes helps you line up items vertically in your flex container.
- Want everything centered vertically? Use align-items-center.
- Need them at the top? Try align-items-flex-start.
- Or maybe at the bottom? Use align-items-flex-end.
Justify Content
While Align Items handles vertical alignment, Justify Content deals with horizontal alignment, especially when your items don't fill up all the available space across the screen.
- To center items horizontally, you’d use justify-content-center.
- To spread them out with space between them, justify-content-space-between is your friend.
- For equal space around items, use justify-content-space-around.
Position
This is a super helpful shortcut! Instead of using align-items and justify-content separately, the Position classes combine them to place your items exactly where you want them. For example:
- top-left: Puts items in the top-left corner.
- center: Puts items right in the middle of the container, both horizontally and vertically.
- bottom-right: Places items in the bottom-right corner.
Arranging the flow of items
Now we’ll explore arranging items.
Direction
This class lets you decide if your items should be arranged in a row (horizontally) or a column (vertically). You can even reverse the order!
- flex-direction-row: Arranges items left-to-right (default).
- flex-direction-column: Stacks items top-to-bottom.
- flex-direction-row-reverse: Arranges row in reverse order.
- flex-direction-column-reverse: Arranges column in reverse order.
Flex Wrap
What happens if you have too many items to fit on one line? Flex Wrap tells your flex container whether to let items "wrap" onto the next line or squeeze them all onto a single line.
- flex-wrap: Items will automatically move to the next line if there's not enough space.
- flex-nowrap: Items will stay on one line, even if they overflow.
Sizing your items
Let’s see how Flex Classes help with the size of your items.
Element Span
These classes control the size of individual items within the flex container. They are shorthand for more complex properties that determine how an item grows, shrinks, or takes up space.
- You might see classes like flex1, flex2, flex3, which make items take up a relative amount of space. An item with flex2 will try to be twice as wide as an item with flex1 if space allows.
Managing multiple lines of items
Align Content
This class is specifically for when you have multiple lines of flex items (because you're using flex-wrap). It helps you distribute those lines vertically along the "cross axis" (the vertical direction).
- You can spread the lines apart with align-content-space-between:
- You can space the lines out with align-content-space-around:
- You can center them with align-content-center:
Align Self
Sometimes, you want one specific item to behave differently from the others. Align Self is like giving a special instruction to a single item, overriding the general alignment set by align-items on the container.
- So, if your container generally centers items, but you want one specific item to go to the top, you'd apply align-self-flex-start to that specific item.
Want to try it out?
There's a fantastic component called Interactive Flex Classes available from OutSystems Forge that lets you play around with these classes and see how they work in real-time.
This component also includes a documentation screen with a comprehensive list of all available flex-related classes, allowing you to explore even more options beyond what's covered in this guide. For a deeper understanding, you can test all these classes on the demo screen of the Interactive Flex Classes component.
It's like playing with building blocks: you start with a main display-flex container (your play area), and then you use the other Flex Classes as instructions to position, size, and arrange your individual blocks (items) exactly how you want them, making your OutSystems apps look professional and well-organized.
Get ready to design with precision and bring your dream application to life, no complex code required!
You can also check out the other UI components, templates, and features in the Forge.
