Re: [css-align][css-flexbox] Differences between start, self-start and flex-start values.

On 07/27/2015 05:12 PM, Javier Fernandez wrote:
> Hi,
>
> I'm not sure whether I understand the difference between the new values
> provided by the CSS Box Alignment spec when applied to Flexbox layout.
>
> * align-self:
>    - The align-self property applies along the flexbox’s cross axis.
>    - The alignment container is the flex line the item is in.
>    -  The alignment subject is the flex item’s margin box.
>
> * start:
>    - Aligns the alignment subject to be flush with the alignment
> container’s start edge.
> * self-start:
>    - Aligns the alignment subject to be flush with the edge of the
> alignment container corresponding to the alignment subject’s start side.
> * flex-start:
>    - Aligns the alignment subject to be flush with the edge of the
> alignment container corresponding to the flex container’s main-start or
> cross-start side, as appropriate.

This will always be the cross-start side, since align-self operates in
the cross dimension.

> Since align-self applies along the cross axis, I assume that container’s
> start edge, being the container the flex line, will be the same than the
> cross-start side, independently of the flex-flow value or the
> writing-mode. I understand that both, start and flex-start produce
> always the same results. am I right on this assumption ?

No, not correct. For align-self,
   * flex-start/flex-end depend on flex-wrap of the container
   * start/end depend on writing-mode of the container
   * self-start/self-end depend on writing-mode of the item

If flex-wrap is wrap-reverse, then the start and flex-end alignments
will be identical, and start/flex-start will be opposite.

> Another doubt I have is how to deal with self-start and orthogonal
> flows. I think it d be something similar to what happens in Grid Layout,
> hence orthogonal flows lead to self-start equivalent to start and
> flex-start. Only when using parallel flows, but opposite directions the
> result of self-start would imply any difference.

No, when determining start/end (or self-start/self-end) you always use
the writing mode. It may vary whether you are mapping using the block
axis directions or the inline axis directions, but you are mapping
against the writing mode in one of those directions.

For example, if we have a vertical-rl ltr item, its start sides are
the top and the right, and the end sides are the bottom and left.
If the cross axis is vertical, the align-item: self-start aligns to
the right. If the cross axis is horizontal, self-start aligns to the
top.

Does that make sense?

~fantasai

Received on Tuesday, 28 July 2015 15:29:37 UTC