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

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.

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 ?

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.

Thanks.

--
javi

Received on Monday, 27 July 2015 21:13:04 UTC