←back to thread

37 points fanf2 | 1 comments | | HN request time: 0s | source
Show context
nicoburns ◴[] No.46184193[source]
The problem with a constraint system is that it would likely be even more subject to performance problems than the current setup.

IMO what CSS layout really needs is:

1. A "proportion of available space" unit. That is, something like the fr unit in CSS grid except applicable to the width/height properties so it can be used in all layout modes and without an implying content-based minimum size (like fr does).

2. A new "display: stack" (name provisional) layout mode that simply stacks boxes one after the other like "display: block" but that works in both axes, and doesn't have quirks of block layout (margin-collapsing, floats, inline-block splitting, etc).

When combining 1 and 2 you'd have a much more intutive layout system that would still give you most of the power of Flexbox and could be implemented with much better performance.

(and you'd still be able to use the existing layout modes if/when you needed to extra power)

replies(4): >>46184268 #>>46184619 #>>46184644 #>>46185777 #
Rumudiez ◴[] No.46184619[source]
(1) could be answered with container query units. Set `container-type: inline-size;` on the parent element (falls back to the whole viewport if unset), then use, e.g., `width: 50cqw; height: 50cqh` in children. The value is a percentage of the given axis
replies(2): >>46184672 #>>46184986 #
1. nicoburns ◴[] No.46184672[source]
I don't think that works if you want to mix "proportion of available space" units with siblings that have a fixed size (a super-common use case for flexbox - having a fixed size box followed by another box that takes up "the rest of the space").