Re: [css3-align] The Great Alignment Bikeshed

On 05/14/2012 12:45 PM, Tab Atkins Jr. wrote:
> On Sun, May 13, 2012 at 4:21 PM, fantasai<fantasai.lists@inkedblade.net>  wrote:
>> Set 3: Outside/Inside/Items
>>
>>    +--------X----------------Y------
>>   A | justify-outside  align-outside
>>   B | justify-inside   align-inside
>>   C | justify-items    align-items
>
> This is my favorite.
>
> For one, I value the swapped ordering.  Having "justify" and "align"
> come first makes more sense to me, given our general rules for how
> alignment works.  It also puts us slightly farther away from the
> existing text/vertical-align properties, which is good.
>
> For two, outside/inside is very difficult to confuse, especially as we
> introduce more things using the inside/outside pair.

I pinged Aaron Gustafson and Lea Verou for comments, and they
both seemed to find the inside/outside pair confusing. If we
like the inversion, though, we can add another set to the list:

Set 4: Self/Content/Items Inversion

    +--------X----------------Y------
  A | justify-self     align-self
  B | justify-content  align-content
  C | justify-items    align-items

I think I'm leaning towards this myself, since it seems to fit
reasonably well with the flexbox model:

Set on flex container:
   align-content   - to set distribution of flex lines
   justify-content - to set distribution of items in each flex line
   align-items     - to set (default) cross-position of items
Set on flex item:
   align-self      - to set individual cross-position of item

Another concern that was raised was that align vs. justify is very
vague. This is because flexbox has its own set of axes independent
from writing mode, and we need a term that works for both. Lea
suggested 'inline-align' and 'stacking-align'; probably we could
shorten that to 'inline-align' and 'stack-align'. It would look
like this:

Set 5: Self/Content/Items Inline/Stack

    +--------X----------------Y------
  A | inline-align-self     stack-align-self
  B | inline-align-content  stack-align-content
  C | inline-align-items    stack-align-items

~fantasai

Received on Wednesday, 23 May 2012 06:30:09 UTC