RE: [css3-flexbox] Flex-align possibilities

Well, right, you can also get the same effect as " align+margin reduced" with auto padding (or almost same)...

As I recall the biggest issue with flex-align is that in many cases it seems that it is there only for baseline. If it weren't, margins could just be enough.

I see a few ways to go about it:

1) admit it is about baseline and call it "flex-baseline-align:none|baseline". That handles most cases via margins, and does extra just for baseline
2) use vertical-align (we've discussed that one, right) -- just make it apply to flex items too, with same meaning as for table cells (or similar, if not everything about table cells makes sense to apply).
3) take "align+margin" as is, it is fine that some outcomes are similar, as long as it is clear that they do. Anything more intuitive  than "vertical-align:text-top" I would find reasonable.

I am not sure BTW what "[anything]" means in the new column. Is it one of before/middle/after/baseline, and regardless of value the effect is the same? But that wouldn't do 2/3/7, would it?

Ah, actually wait a minute... pictures 4, 5, and 10 are wrong. There is no reason to stretch the box when there is an auto margin and no baseline alignment. You should have same picture for 1=4=5 and 10=12=13. And 6=8=9.

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Tuesday, December 21, 2010 11:37 AM
To: Alex Mogilevsky
Cc: www-style list
Subject: 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 22:04:48 UTC