Oracle APEX 26.1 - Flexbox Container

There is one feature in the APEX 26.1, that will really take your page layouts to another level. This may be bigger than you think, it is just a simple container, but it brings many possibilities.

The feature I am talking about is Flexbox Container. It allows you to organize other page components in auto layouts, that will dynamically change based on the settings and content of the container.

Flexbox container

Flexbox container is a new type of region. It has a little bit different options, for example it lacks the Appearance section and it has different attributes.

It does not render when you run the application, you cannot define header and other stuff, it is just a layout container. And the attributes contain things like Direction, Alignment or Gap

Examples

For the demonstration I created simple page with multiple regions and page items, that are placed in Flexbox containers.

First case is simple regions. I created two containers, one Static and one Flexbox. Inside of each container are two regions Region1 and Region2.

I also created a checkbox group with on change dynamic action, that controls the visibility of the regions.

When I hide the Region2, in the Flexbox container, the Region1 will take the place of the Region2 and stretch to fill all the available space.

The static region does not work like that, and when the Region2 is hidden, the Region1 will simple stay as before.

This situation is still not that bad, and the page layout may still be okay, but what happens when I hide the Region1 and show only Region2 is, that the Static region will leave a huge gap where Region1 was before, and this does not look ok anymore.

The Flexbox container deals with it in a same way, it stretches the Region2 to full width and it fills out the available space.

I can imagine that you could use multiple Flexbox containers as designers do in Figma and setup auto layouts that will always show the regions and items in predictable way.

Next example is using page items. As before, I created two containers, one Flexbox and one Static, with three items inside each. The direction in Flexbox is set to row.

I also added the checkbox group for the control.

Below I created another region with the same setup but this time with vertical layout.

When I turn off the date field, the Flexbox container moves the select field to take the place of the date. What is different here is also the width of the select field, I did use default values for all the fields, but it still looks different than in the static region.

The vertical layout removed the date field from both containers, this layout work the same for Flexbox and static container.

When I turn off the text field, the static container creates a huge gap again, but the Flexbox will realign the items to the left side.

This can be further controlled by alignment options.

Conclusions

I think that Flexbox container may become new standard for all the page layouts, it makes the page dynamically react, stretch and align the items to keep the layout clean and in order.

With a smart combination of multiple containers it will be possible to recreate complicated auto layouts without use of CSS code or customizations.

Thank you for reading the article and see you next time.