Re: [css3-flexbox] Flex-align possibilities

On Tue, Dec 21, 2010 at 4:07 PM, Alex Mogilevsky <alexmog@microsoft.com> wrote:
> Interesting, I see what you mean... e.g. in #5 "flex-align:after" makes all items the same height; then "margin-bottom:auto" put the whole row at the top of the flexbox.

Specifically, "flex-align: before after;" would mean align the bottom
edge of the contents while keeping the


> Apparently I was looking at align+margin but reading it as "align+margin reduced"... I see the action as *first* margins take away any space over shrink-to-fit, and *second* if size is bigger than shrink-to-fit (either it is specified or there are no auto margins), the content is aligned within the box. If baseline alignment is used, it affects position if there are auto margins, or alignment within the box otherwise.

Yup.  Not sure exactly what do yet if there is free space left but not
enough to align properly, but I'll figure it out.

That is, what to do if the flexbox children all have a specified
height of 50px, but one of them has only 20px of content and the other
has 100px of content, while flex-align: after is set.  You want to
align all the contents' bottoms together, but that would mean dropping
the first box's content entirely into the overflow area.

Using the idea of just using "flex-align: baseline | none" and then
auto margins and padding, I could handle this easily - that case would
instead be just "padding-top: auto", and the first box's content would
be visibly at the bottom while the second box overflowed.


> I wonder if you have tried building the same diagram for vertical flexbox... Considering that all combinations of 'text-align' and 'margin-xxx:auto' are already well defined it may be a good reference for what to expect in horizontal flexbox...

Vertical flexboxes are equivalent or simpler.  They're equivalent if
the writing-mode of the flexbox children is vertical.  Otherwise,
they're a lot simpler, because flex-align doesn't do anything.  Just
use the shrink-to-fit width and then apply margins.

~TJ

Received on Wednesday, 22 December 2010 00:42:30 UTC