RE: Alignment property proposal

Flex unit is a great idea. My concern is that if you do not specify explicitly (something like "alignment: horizontal") CSS becomes more and more obscure and harder to use. One of its strength today is mostly it’s descriptiveness (at least in the property names less so in the selector syntax).

-- MM

-----Original Message-----
From: Andrew Fedoniouk [mailto:news@terrainformatica.com]
Sent: Wednesday, December 26, 2007 9:29 PM
To: Anne van Kesteren
Cc: fantasai; Markus Mielke; www-style@w3.org
Subject: Re: Alignment property proposal

Anne van Kesteren wrote:
>
> On Wed, 26 Dec 2007 09:44:44 +0100, Anne van Kesteren <annevk@opera.com>
> wrote:
>> I think it would be good if one of these features exactly matches the
>> behavior of <center>. (I thought that was the idea behind the
>> proposal, at least for some proponents.) It seems that WebKit and
>> Gecko have implemented that as text-align:-webkit-center and
>> text-align:-moz-center respectively. Maybe we should introduce
>> block-center as a value for text-align.
>
> As for vertical centering and horizontal centering in general, I think
> we should more seriously look into the flexible box model as featured by
> XUL. Maybe combining it with the Advanced Layout Module in some way as
> Roc suggested if that's at all feasible. I think that would solve a
> bunch of layout issues people are currently running into and hacking
> around using 'float', 'position', and probably script.
>
>

XUL flexes are not so suitable for CSS as they describe only
width/height of elements but for aligning purposes you need flexes
to be applied to margins for example.

For CSS it is better to use so called "flex units" [1,2]:

Following will replace blocks vertically (as usual) and center them
horizontally:

body
{
   flow:vertical;
}
body > *
{
   margin-left; 1*;
   margin-right; 1*;
}

and this:

body
{
   flow:horizontal;
}

body > *
{
   margin-top; 1*;
   margin-bottom; 1*;
}

will replace blocks in single row and center them vertically.

And this:
body
{
   flow:horizontal;
}

body > *
{
   margin-top; 0;
   margin-bottom; 0;
   height:1*;
}

will replace blocks in single row and make their height equal to each
other - to the height of tallest element in the row (similar to cells in
single row table).

--
Andrew Fedoniouk.

http://terrainformatica.com


[1] 'flex' units:
http://www.terrainformatica.com/htmlayout/fspu.whtm

[2] The 'flow' attribute:
http://www.terrainformatica.com/htmlayout/flow.whtm

Received on Friday, 28 December 2007 16:11:44 UTC