Re: [css3-flexbox] Flex-align possibilities

On Tue, Dec 21, 2010 at 12:15 AM, Alex Mogilevsky <alexmog@microsoft.com> wrote:
> It's been a while so I may need a reminder for what we agreed on last time. Whatever it was I remember I liked it then...

I don't quite remember what we agreed on either, which is why I drew
up all the diagrams and asked about it.  ^_^  Plus, I know that we had
some chatter about possibilities over dinner and drinks in France, and
I don't quite remember what was going on there.

> Looking at this table, I do like the Align+Margin column.
>
> - using auto margins to align left/right/center is already well understood, so extending that to vertical alignment in horizontal flexbox looks intuitive and will immediately make sense to people.

Cool, I think I like it too.

> - it may be a slight stretch that "flex-align:baseline; margin:auto 0;" may not actually center vertically, but it still makes sence.

I think I agree.  I added a second "flex-align + margin" option that's
much more stripped down, but as a result is much simpler to understand
- margins claim free space first, then padding (through flex-align).

> - I certainly have bias of two properties over a combined property that is not a shorthand... IMO combined properties create complicated OM, and they are harder to use too, especially if same word can be used in more than one position.
>
> Of 2,3 and 7 "align+margin" can do 2 and 7 -- seems good too.
>
> Do you have any new concerns that make other options attractive? Keeping the old draft is less work for me of course, but you managed to convince me earlier that separate control of align and baseline is important...

My concern is that the first two options, which can address 16 of the
diagrams, have too much magic going on.  The differences between
several of the options aren't large, and it's somewhat hard to explain
what is actually going on.

I think I like the second flex-align+margin I just introduced, as it
hits all the important cases and is very simple to understand.  It
misses 2, 3, and 7, but #3 can be approximated with a wrapper element
and flex-align:baseline;height:auto; if necessary.

~TJ

Received on Tuesday, 21 December 2010 19:38:03 UTC