Re: [CSS3] horizontal/vertical-align ?

On Thu, Apr 22, 2010 at 9:39 AM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> Sorry, but my question still stands -
> what does vertical-align mean here:
>
> span
> {
>  display: table-cell;
>  vertical-align: bottom;
> }
> ?

The element is a table-cell, and thus the table-cell rules apply.


> If it is a content of the span alignment then how to apply
> its vertical alignment in line box as here:
> span
> {
>  display: inline-block;
>  vertical-align: bottom;
> }

The element is not a table-cell, and thus the normal text rules apply.


> This bug in specification prevents vertical-align
> to be used with any other elements that establish
> float layout context.  E.g. flexboxes of David Baron
> or elements under the 'flow' container as in my case.

I don't understand what you mean here, or what the problem is.


>> The main use-cases for horizontal-align are addressed by flexbox,
>> which is a layout mode very similar to static layout, but designed
>> more for the layout of blocks than of text.
>>
>
> flexbox is about free space concept and when element
> overflows there is no such space at all.
>
> Yes, you can say
>
> cont { flow:vertical; }
> cont > elem {  margin-left:*; width:XXXpx; margin-right:0; }
>
> to right-align elem box horizontally but this does not address
> case when 'cont' overflows .
>
> Flow/flexes and vertical/horizontal-align makes the layout
> system complete as these are parts of the same
> algorithm/functionality.

Making an element stick to one side or the other is done with the
box-align property.

Overflow is indeed not addressed by box-align; it's currently defined
directly by the direction of the flow.  I have an open question about
flexbox asking exactly which overflow-direction is best, given a
particular flow direction (put another way, which direction should be
before/after, given a particular start/end direction).  I suspect that
I'll end up adding a property to allow manual control of this,
precisely so you can, say, have a vertical flexbox on both the left
and right of a page, and have both of them overflow toward the center
of the page.

For normal text flow, the stickiness on blocks can be done by setting
an appropriate margin to auto.  Overflow is addressed by the direction
property.

~TJ

Received on Thursday, 22 April 2010 17:55:28 UTC