Re: [css3-flexbox] [css3-grid-layout] Too Many Alignment Properties

On 02/16/2012 04:48 AM, fantasai wrote:
> On 02/01/2012 11:25 AM, fantasai wrote:
>> So far we have 'vertical-align' and 'text-align', which mainly have to do with
>> text, but the new layout models are starting to introduce a lot more aligns.
>> Flexbox has four different alignment properties. IIRC Grid introduces several
>> more [...]
>>
>> There's the problem of needing four appropriately generic and appropriately
>> precise names, but I think we should be able to get away with four [alignment]
>> properties in CSS total.
>
> Ok, so here's a summary of the flexbox alignment properties:
>
> * flex-align - assigns default cross-shift to each flex child
> * flex-item-align - cross-shifts flex item within line
> * flex-line-pack - cross-shifts lines within flexbox
> * flex-pack - main-shifts flex items
>
> (Nevermind aligning with Grid or Block alignment, these four by themselves
> are confusing enough to figure out which means what!)
>
> There's also a fourth unsolved case: stretching the flex items, but aligning
> the contents within them--as for the content of table cells in a table row.
> I suspect this is a pretty common case, so it should be easy. (E.g. I have
> my tab navigation across the top. I want to lay it out with flexbox, and I
> want each box to have the same height, but I want the labels baseline-aligned.)
>
> So anyway, here's my attempt to solve all this, take I. :)

And here's Take II:
   http://fantasai.inkedblade.net/style/specs/css3-align/

(Names from Take I are listed in the top row of the Alternative Names table.)

~fantasai

Received on Tuesday, 24 April 2012 06:25:10 UTC