css, 2 months ago (edited 2 months ago)

@mia did someone already wrote something explaining how the alignment should work when used within a block formatting context or inline formatting context? like it should align the line boxes, etc, etc (I couldn't find where in the Spec)

I can already imagine people struggling because "it doesn't work" like they want. Considering that it's align-content and not align-items (here as well many don't make the difference).

css, 2 months ago

@mia I suspect that this example: https://codepen.io/t_afif/pen/JjVoxJj will get repeated a lot: "Why the text is not vertically aligned with the image"

You know why and I know why but for many people we need an explanation.

mia, 2 months ago

@css I don't know if there have been good explainer articles about this, but it is defined in the spec. See…

• content distribution on block containers: https://www.w3.org/TR/css-align-3/#distribution-block
• self alignment section also lists block and abspos behavior: https://www.w3.org/TR/css-align-3/#self-alignment

It would be great to have more people teaching how it all works!

(Sad that it's still rolling out a bit at a time. That makes it harder to teach the whole system.)

css, 2 months ago (edited 2 months ago)

@mia actually, it's easier than what I was thinking 😅

I had the impression that we are going to align the line-boxes and we can have fancy alignment using space-around and co but in the end all the content is consider as a unit.

Still not trivial for everyone but at least we only have to explain the "as a unit" part

mia, 2 months ago

@css Oh yeah, even with everything implemented, it's still only a block-level thing. No distribution of individual line-boxes or inline-level content.

Chris, 2 months ago

@mia CSS is awesome