Flex Features for UIListLayout Client Release

LETSSSS FRICKING GOOOO OMG I HATE YOU GUYS FOR DELAYING THIS SOO MUCH SHAHAHHAHSBSH!

I had to remake my games gui because of you!

My joy is uncountable but so is my anger.

14 Likes

I love how roblox ui design is coming closer and closer to CSS. As an aspiring full-stack web developer, I can’t say I don’t love this update.

13 Likes

ascending-energy

22 Likes

The wait felt like 2 years. But anyways, IT’S FINALLY HERE, I LOVE ITTTT

Thank you so much for real, this will help A LOT :heart:

15 Likes

No more using plugins to do this!

14 Likes

The first bug you posted [Flickering UI Elements ONLY in Studio] unfortunately has not been fixed yet, but it will be worked on soon! I’ll post an update when it’s fixed!

The second bug you posted [Automatic sized UI going crazy - jiggling and rescaling] should already be fixed!

Thanks for reporting this, it looks like a bug! Would you be able to share the UI in the screenshot as an rbxm or rbxl (in a PM if you would like) so I can debug further? I tried to repro with a UIListLayout with ImageButtons but I wasn’t able to see this issue. Thank you!

[Resolved] The issue was caused by the AutoScale plugin overriding the size of new instances.

10 Likes

Thank you for releasing this, I already had stuff made with flex but couldn’t use it

9 Likes

This is a massive W! Thank you Roblox! :wink:

8 Likes

Hell yeah! Another awesome improvement by Roblox! Thank you for keeping up these amazing updates, and have a great day/night!

9 Likes

Looks like UI design just got a lot easier, Thanks a ton for including this! :smiley:

9 Likes

A great update that will make creating dynamic UIs even easier and faster. It is nice to find similarities with CSS. Thank you <3

10 Likes

YES!

This has been the top feature for UI that I have been looking forward to! I have a project that I am currently working on that uses this feature. And let me tell you, it has made my life so much more easier.

One of the biggest problems I currently face making User Interface’s is different device screen sizes. With the release of Flex Features, I am able to wrap parts of my UI to the bottom.

The best way to show you this is with images:

For larger screens; It doesn’t wrap:

For smaller screens; It wraps

You could still do this, but it would take some coding and testing.

And THANK YOU for all those who have worked on this :pray:

14 Likes

finaly! it took long to release it. So glad it’s out!

8 Likes

Right as I was wanting to use it a couple days ago! Thank you guys for this amazing update

5 Likes

This is amazing absolutely insane, thank you to the engineers who worked on this, these features are gonna be so useful in so many ways

7 Likes

Brobdingnagian win for UI Designers!!! Thank you!

4 Likes

Awesome! I was working on some UI earlier and was wondering why there were some new UIListLayout properties and just saw this. Great stuff.

5 Likes

I’m curious if there’s any way to limit the flex fill so that a GUI element won’t be any larger than the smallest element in a list. The example below bothers me because the elements on the last line are longer than the rest.


I instead wish that all of the GUI elements would stay the same size, as if they were in a grid (like this).

I’ve tried combining different UI elements to create something that resembles the picture above, while still retaining the flex functionality, but with no luck. Is there a way to achieve this and I just haven’t found it? Or is there no functionality for this yet? (I know this is kind of nitpicky).

3 Likes

Hi, great question!

In your example, if you would like all items in the container to be the same size and be aligned to rows/columns, I would recommend using UIGridLayout.

UIListLayout + HorizontalFlex is useful when you want items to grow or shrink, but it doesn’t make any guarantees about each item being the same size (with Wraps=true), or aligning the items to a grid. If items in the UIListLayout are growing too large, you could try adding a UISizeConstraint to limit each item’s max size.
Hope that helps!

10 Likes

thank. god. flex ftw :sunglasses::sunglasses::sunglasses:

unfortunate that these follow the UIBase Instance convention though

9 Likes