Solved by Flexbox
Solved by flexbox is nice.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?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?why not just have hor-align, ver-align?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?Here's my pseudo-code:body ver nowrap, hor-align center.add 2 flex boxes ver nowrap.box 1 height stretch, hor-align left, ver-align center.box 2 height fit-content, hor-align left, ver-align center.add 3 paragraphs to box 1.add 1 paragraph to box 2.In reality, it is:
body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess.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.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?!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.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?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.