Re: [css3-flexbox] Flex-align possibilities

I cannot resist to say again that without all flex length units all this 
looks
extremely ugly.

With flex units:

#horizontal-box { flow:horizontal;  }
#horizontal-box > * { margin-top:1fx;  }  /* children v-aligned to bottom */
#horizontal-box > * { margin:1fx 0;  }  /* children v-aligned to center */
#horizontal-box > * { margin-bottom:1fx;  /* children v-aligned to top */ }

( in some case you will need flexible margins and e.g. paddings defined
on the same element. That is what current flexbox  cannot do in principle )

If we need baseline alignment in some place then we need inline
formatting context anyway. So this:

#horizontal-box
{
    flow:default; /*optional declaration*/
}
#horizontal-box > *
{
   display:inline-block;
   vertical-align: baseline;
   width:1fx;
}
will align all inline boxes to baseline and will make their widths
equal.

Just don't understand why you guys are trying to
galvanize that flexbox horse again?

-- 
Andrew Fedoniouk
http://terrainformatica.com

-----Original Message----- 
From: Tab Atkins Jr.
Sent: Monday, December 20, 2010 4:30 PM
To: www-style list
Subject: [css3-flexbox] Flex-align possibilities

I'm merging the changes that Alex and I agreed on into the Flexbox
spec right now, and I'm still not quite sure what I want to do about
flex-align.  I've got a couple of choices, which I've illustrated
here: <http://www.xanthir.com/diagrams/flex-align-diagrams.html>.
(Use Firefox - Webkit has a bug regarding box-sizing and percentage
heights on elements in table-cells that screws up the 'stretch'
diagrams, and I dunno about other browser's box-sizing support because
I don't have them on my current box.)

As you can see by the diagram, there a bunch of possibilities.  At
minimum, we should support 1, 6, 13, 14-17, and either 2, 3, or 7.
The other cases may or may not be useful; align+switch cuts out all
the other ones.

So, bikeshed time.  What seems best?  They're all roughly equal from a
spec-writing perspective.

~TJ

Received on Tuesday, 21 December 2010 17:15:05 UTC