I was experimenting with CSS Flexbox and recreated it in Hype. I refer to it as recreate because, unfortunately, Hype introduced .HYPE_element_container overall and innerhtmldiv in the builder. This was initially intended to solve problems related to 3D perspectives (if I recall correctly) but ended up complicating many other aspects related to stacking, nesting order, Flexbox, Grid, blend modes, and more. This workaround attempts to reintegrate Flexbox functionality in a nested context, although it's still a work in progress. It does break some of the previews in Hype but not when published.
Since Hype doesn't track the stacking order in the order elements are added to the DOM but only in using z-index, I assigned an order attribute in pure CSS for up to 50 children per group. This resulted in redundant declarations that could be more efficiently managed in JavaScript, but I wanted to keep it simple and stick to pure CSS.
HypeFlexbox.hype.zip (46,3 KB)
Last update: 2. Feb, 2024
Improvements and thoughts are welcome. Hope to see this and grid sub containers native in Hype 5.
and worth a new release alone.