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

Hi fantasai,

Thanks for the replies, really helpful.

On 07/28/2015 05:25 PM, fantasai wrote:
> On 07/27/2015 05:12 PM, Javier Fernandez wrote:
>> * 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.
> 

So, this is an error in the specs, isn't it ? I was about to ask what
would make we use either main-start or cross-start side, but from your
words I assume it's a mistake and we should use only cross-start side.

>> 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.
> 

Correct, I understand now the difference. I totally forgot about flex-wrap.

>> 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.
> 

>From the example above, I understand that you mention writing-mode to
refer both properties, -webkit-writing-mode and direction. That's make
sense.

> 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.

I guess here is "top", isn't it ? Since cross axis is vertical we align
flex item top-bottom, If I understood it correctly.

 If the cross axis is horizontal, self-start aligns to the
> top.
> 

Hence here it should be right.

> Does that make sense?

I hope the example had the mistakes I mentioned, which it'd mean it
makes sense for me, otherwise I think I'll have to read it again more
carefully.

BR

--
javi

Received on Wednesday, 29 July 2015 09:05:07 UTC