[css3-align] Some questions about justify-self

On Wed, Mar 20, 2013 at 4:29 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Wed, Mar 20, 2013 at 4:24 PM, Christian Biesinger
> <cbiesinger@chromium.org> wrote:
>> On Wed, Mar 20, 2013 at 4:03 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>> For guidance, check out the Flexbox Baselines section
>>> <http://dev.w3.org/csswg/css3-flexbox/#flex-baselines>, which is very
>>> precise and explains how to handle cases when there's no appropriate
>>> baseline in a particular direction.
>>
>> Does this mean that the synthesized baseline may have to be used also
>> for justify-content: baseline?
>>
>> Just to make sure I understand this correctly - in this case:
>> http://plexode.com/eval3/#s=aekVQXANJVQMbAx1yAXgePQMOWEZDTEpVDktWVFVKR1oORFBPVUauGwFDQlRGTUpPRhyaHz1PvwEBlZeZm52foZxToblIDk5QRUayV0ZTp0RCTQ5NUxwBiw6IslG5TL0nSlOmw1RWQx8lSlcdEO/x9nK+T8LETCaTieUCiLDMU5PZ7RabVa7Zbbdb7hcayXBISBIKZGLTgRIORSyCYRKJZXo0IysJ5FALzeoQfa/X76D4DLwA
>>
>> "First" and "Second" should be aligned, right?
>
> Yes, they have vertical baselines in the obvious places, and so will
> line up if you use justify-self:baseline.  (Assuming block layout,
> where the justify axis is the inline axis.)

Thanks.

>>> "stretch" should act the same way it does in Flexbox - if 'height' is
>>> "auto", it sets the height such that the margin box exactly fills the
>>> available space (treating auto margins as zero, unless they've already
>>> been resolved).  If 'height' isn't auto, is does nothing, and acts
>>> like 'start'.
>>
>> (Huh, that behavior surprised me. I expected flexbox to stretch an
>> explicit-height item, just like flex:1; will flex an explicit-width
>> item)
>
> If that was the case, it would be impossible to get a flex item to
> *not* be stretched.  It's easy to make it stretchy - just leave the
> height alone, as it's "auto" by default.

Fair enough, but it would be possible to make it not stretch.
align-self: end, or baseline, or start...

-christian

Received on Wednesday, 20 March 2013 23:39:43 UTC