How to evenly distribute UI elements along the middle of an axis with a certain offset?

I have a problem I've been trying to find the solution to...

Let's suppose there is a frame, let's call it A with the Udim2 size of {0.8, 0},{0.2, 0} (this is just a mere example)

We want to distribute frames, let's call them B with a size of {0.2, 0},{0.9, 0} inside A on the x-axis in the middle. Therefore, if there was only one B frame, it would look something like this.

The more frames of B we add to A, the more it spreads. So let's say we had two frames, it would look like this. Three frames would look like this and so on.

The point is, the algorithm will keep on distributing the frames evenly with the same offset each time.

I have tried to do this, but without success so I now come here for help and I guess a bit of a challenge. Could anyone possibly help me with this? I would appreciate any tips or, luckily, a solution.

Thanks in advance, Rodrigo455

This is just a matter of creating a function that measures whether the amount of frames and their sizes is too much for the frame to contain, or enough for the frame to contain. This being said, I will try to go over how you could possibly do this.

Assuming you want all the frames to be the same size until the container frame can not hold the amount of frames inside of it, you will need to evaluate how many spaces there will be based on the amount of frames there are in the container.

This will look something like this:

local frame_number = 1
local space_number = frame_number + 1 -- there is one more space than the amount of frames

After you have the amount of spaces, you need to evaluate the x size of the frames. For simplicity, we will use the x scale size.

local frame_scale_x = 0.2 -- change this to your frame size
local total_frame_scale_x  = frame_scale_x*frame_number -- this is the total x
local remaining_space = 1-total_frame_scale_x -- this is the remaining x scale in the container

Once you have the remaining x scale left in the container, you need to calculate the amount of space needed in between the frames in order for them to be equally spaced. This is easy, since all you need to do is divide the remaining_space by space_number.

local spacing_size = remaining_space/space_number

Now you need to position the frames in their respective positions. This can be done with a function, like so:

function getPosX(frame_num)
	local spacing = spacing_size*frame_num -- there is a space in the beginning
	local sizing = frame_scale_x*(frame_num-1) -- start counting frame sizes after the first frame
	return spacing+sizing
end

In order for this to work, you need to make sure that the spacing between each frame is greater than or equal to zero, otherwise the frames will be on top of eachother. If you want the frames to be on top of one another, just don't include the following condition:

if spacing_size >= 0 then
	
end

Once you have all this, you are ready to create your frames. The full script should look something like this:

local container = script.Parent -- the container frame
local frame_scale_x = 0.2 -- change to frame size
local frame_number = 5 -- change to number of frames you want
local space_number = frame_number+1
local total_frame_scale_x = frame_scale_x*frame_number
local remaining_space = 1-total_frame_scale_x
local spacing_size = remaining_space/space_number

function getPosX(frame_num)
	local spacing = spacing_size*frame_num
	local sizing = frame_scale_x*(frame_num-1)
	return spacing+sizing
end

if spacing_size >= 0 then
	for i=1,frame_number do
		local f = Instance.new("TextLabel", container)
		f.Size = UDim2.new(frame_scale_x, 0, 0.9, 0)
		f.Position = UDim2.new(getPosX(i), 0, 0.05, 0)
		f.Text = "#" .. tostring(i)
		-- Add stuff here to change the looks of the TextLabels
	end
end

I hope this helped!

ALSO: If you want there to be more space for the frames, just make frame_scale_x smaller. :)