Flex Features for UIListLayout Client Release

[awry_y (ary)]

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.

[FoxysCove102 (Ham)]

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.

[Splixent]

[isaac010901 (Tropical)]

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

[fakeforsure]

No more using plugins to do this!

[stadium_parkour]

@Brylan_Leske

Fantastic, have the flickering issues in studio been fixed ahead of the client release?

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!

@ailsens

There is a problem: when I duplicate the button (this is shown in the video), it turns out to be smaller than the others. I use the FILL property (see my UIList settings screenshot below). The video shows that the new button is smaller in width than the others. However, if you press CTRL+Z once or twice, the size becomes correct. What is the reason for this?

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.

[ultra_2033]

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

[BrawlBattle]

This is a massive W! Thank you Roblox!

[IcKonDev (IcKon)]

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

[faster1222 (Captain_Tails)]

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

[Dr_Biscottox]

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

[kavi_conner (Kavi)]

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

[Velover3454 (Catargo)]

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

[ColRealPro]

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

[oinkyk (oinky)]

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

[essissies (Kaiden)]

Brobdingnagian win for UI Designers!!! Thank you!

[Rinpix]

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

[Fxdent]

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).

[stadium_parkour]

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!

[ImAvafe (Avafe)]

thank. god. flex ftw

unfortunate that these follow the UIBase Instance convention though