FillPortion/Flex Unit [feature request]

[badcodecat]

Proposal

FillPortion units are a way to specify a portion of the total available space that an element should take up. For example, if you have a container with a width 100px and you have 3 children with widths of 1 fill portion, 2 fill portions, and 1 fill portion, the children will take up 25px, 50px, and 25px respectively. Right now there is support for relative units and absolute units, but no way to specify a portion of the available space. This would be a useful feature for creating flexible layouts.

Out in the wild

To better explain the proposal, here are some examples of how this works in other libraries: In the rust GUI library iced, there is a FillPortion unit that works exactly as described above:

Column::new()
	.push(Space::with_width(Length::FillPortion(1))) // Will take up 1/3 of the available space
	.push(Space::with_width(Length::FillPortion(2))) // Will take up 2/3 of the available space

In HTML/CSS, you can achieve a similar effect using flexbox:

<div style="display: flex; width: 100px;">
	<div style="flex: 1;"> 
		<!-- Will take up 1/3 of the available space -->
	</div>
	<div style="flex: 2;"> 
		<!-- Will take up 2/3 of the available space -->
	</div>
</div>

(note that the above HTML/CSS example can be somewhat replicated using bevy's own UI system)

How it could look in bevy_lunex

A new unit could be added, perhaps called Fp for FillPortion to match the naming of other units in bevy_lunex.

// A FillPortion of 3
let fill_portion = Fp(3);
// A FillPortion of 1
let fill_portion = Fp(1);

Considerations

In order for this to work, there are a few things that need to be considered:

• The layout functions would need to be "aware" of other elements with FillPortion units in order to calculate the correct size for each element.
• How FillPortion units interact with other units