W3C home > Mailing lists > Public > www-style@w3.org > April 2012

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

From: fantasai <fantasai.lists@inkedblade.net>
Date: Mon, 23 Apr 2012 23:23:33 -0700
Message-ID: <4F9646E5.2060801@inkedblade.net>
To: www-style@w3.org
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:

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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:15 UTC