Flex Features for UIListLayout Client Release

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

7 Likes

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

8 Likes

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

8 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

9 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:

13 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

6 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

the image at the top looks like river view, where it’s tile width changes depending on size

5 Likes

I am so hyped for this to have been released right before I start a UI overhaul :sob:

4 Likes

Looks great, we will certainly have better control of our User Interface with these types of updates! :+1:

1 Like

Thank you so much for this, I have been waiting for a long time but now I can finally do this!

1 Like

:crown: Thank you for your amazing work :DDD

5 Likes

THANK YOUUUUUUUUUUUUUUUUUUUUUUU but fr this is something i been waiting for a while, glad to finally see it

3 Likes

Hi, thanks for your comment!

Would you be able to share more about what you mean by “UIBase Instance convention”?
Are you referring to the inheritance of UIFlexItem? UIFlexItem inherits from UIComponent and that inherits from UIBase, which I think is the correct inheritance for UI components?

Instance
|- UIBase
  |- UIComponent
    |- UIFlexItem
1 Like