Explore flex layout for distributing space among children

[d12frosted]

Sometimes you want UI elements to fill available space rather than having fixed widths. For example:

;; Current approach - manual width calculation
(vui-hstack
  (vui-text "Name:")
  (vui-field :width (- fill-column 20) ...)  ; manual math, fragile
  (vui-button "Save"))

;; With flex - declarative
(vui-flex :width fill-column
  (vui-text "Name:")
  (vui-field :flex-grow 1 ...)  ; "take remaining space"
  (vui-button "Save"))

Basic idea

• Container has a known width (explicit, fill-column, or window-width)
• Children without :flex-grow get their natural width
• Remaining space distributed among children with :flex-grow proportionally
• Maybe support justify-content for alignment (:start, :center, :space-between)

Open questions

• How to handle multi-line children? Their "width" is ambiguous
• Should this re-render on window resize? Or is that the user's responsibility?
• Vertical flex (height distribution) - probably not worth it for text buffers?
• Should this be a new vui-flex component or an option on vui-hstack?