Re: box-align

"Perhaps it could take two values, one for horizontal and one for vertical"

It is a must in my opinion:

It has to be two alignment properties: vertical-align and horizontal-align.

Current vertical-align property can be used in flex contexts as it is.
New property for that is not required.

For the illustration consider following setup:
<p>Some text:
     <widget><label>...</label><button /></widget>.</p>

The widget here is declared as
widget {
   display:inline-block;
   flow:horizontal;
   vertical-align:baseline; }

This means the widget will be baseline aligned inside line box
with its outer text and its children will be aligned to
the same baseline.  So we will see something close to this:

Some text: [[label][b]].

When flex block is placed inside block container contexts
(so it is display:block & friends) then the meaning of 'vertical-align'
is exactly the same as in table cells. Nothing new here at all.

So vertical-align property defines outer-alignment of block itself and
inner-alignment - alignment of its children inside it.
In display:block topologies (like display:table-cell) the vertical-align
defines inner-alignment only.

Inner-alignment of flex block is using following mapping  of
'vertical-align' values:

baseline | sub | super  -> content 'baseline' aligned
top | text-top   - content 'top' aligned
middle -  content 'middle' aligned
bottom | text-bottom - bottom alignment.

As order of vertical layout calculations is this:

1. Do any vertical flex computations and if there is a free space
    left then
2. Do vertical alignment according to 'vertical-align' using free space
    left from previous step.

then flex units can be used to override vertical-align values
for particular children.
( In the widget above <button> may have padding:1* 0;
defined so it will span whole height of the widget )

'horizontal-align' property accepts values 'left' | 'center' | 'right'
and again is being used as last step of horizontal layout calculations.

Both vertical-align and horizontal-align define also rendering behavior
of overflowed element.
Imagine that flex block is defined with overflow:hidden; and
it has content that overflows. Let it be flow:vertical for illustration.

In this case for horizontal-align:right we will see rightmost sides
of child elements. Left sides of children will be cut off.
The same model is for vertical-align.  With vertical-align:bottom
last child will be always visible and first one will be hidden if
it does not fit.  The same is about overflow:scroll; - alignment
defines scroll position invariant when dimensions of flex block
are changing.

If will decide to use separate property for content block alignment
(like 'box-align' for example) then we should have clear model of
interaction between that 'box-align' and 'vertical-align'. Especially
in line box (display:inline-block; flow:horizontal)  contexts.

-- 
Andrew Fedoniouk

http://terrainformatica.com

-----Original Message----- 
From: Brad Kemper
Sent: Tuesday, April 26, 2011 7:28 AM
To: Alex Mogilevsky
Cc: Tab Atkins Jr. ; www-style list
Subject: box-align


On Apr 25, 2011, at 11:06 PM, Alex Mogilevsky wrote:

> So the meaning of box-align is to do what table cells do with 'vertical 
> align', with same values, right? But it is still just about alignment in 
> block direction?

Perhaps it could take two values, one for horizontal and one for vertical 
(if only one value is given, then it sets both to the same thing). The 
horizontal value would be like the <center> tag, centering children of the 
block.

Received on Wednesday, 27 April 2011 03:08:27 UTC