Solved by Flexbox
Solved by flexbox is nice.<p>Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this?<p>row/column - use horizontal/vertical or hor/ver for short.
justify-content and align-items mean different things depending on whether you're using row or column - what?<p>why not just have hor-align, ver-align?<p>Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this?<p>Here's my pseudo-code:<p>body ver nowrap, hor-align center.<p>add 2 flex boxes ver nowrap.<p>box 1 height stretch, hor-align left, ver-align center.<p>box 2 height fit-content, hor-align left, ver-align center.<p>add 3 paragraphs to box 1.<p>add 1 paragraph to box 2.<p>In reality, it is:
body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess.<p>How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax.<p>And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?!<p>Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout.<p>Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox?<p>Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.