Re: [css-flexbox] and vertical-align

On Thu, Apr 19, 2012 at 10:17 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Wed, Apr 18, 2012 at 7:58 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> "Simple" question: why flexbox is not using existing vertical-align property?
>>
>> Conceptually element under flex-direction:row is very close to
>> display:table-row/table element with display:table-cell children.
>> vertical-align works for such elements already including
>> vertical-align:baseline.
>>
>> So is my question above.
>
> Because the cross-axis isn't guaranteed to be vertical in any way.
>
> Also, using vertical-align on table-cells was a horrible mistake in
> the first place, with the confusion it causes persisting to this day -
> vertical-align on an inline element means "align me relative to the
> line I'm in", while vertical-align on a table-cell means "align my
> contents".  That's just ridiculous, and we shouldn't perpetuate the
> problem.
>

Let's imagine for one second that vertical-align is the only property
that defines vertical alignment. For any element including
 flex container (#flex-cont) and flex items ( #flex-cont > *).

Consider that we have this rule:

#flex-cont {  vertical-align: baseline;
                  display: inline-flexbox;
                  flex-direction: row; }

It could be read as these two statements:

a. #flex-cont has all children baseline aligned if alignment
   is not redefined individually by flex-items.
b. if #flex-cont is display:inline-block element then
    it is being baseline aligned with contained line box.

So three words here:

<p>Hello <#flex-cont>
       <#flex-item>wonderful</#flex-item>
       <#flex-item>world</#flex-item>
       </#flex-cont></p>

will be aligned to same line - baseline of  the <p>'s
linebox(es).

In general vertical-align:baseline; for non-replaced elements makes
sense only if it defines alignment of children *and* the element itself
at the same time. This combination for example makes no sense even
impossible to compute. For example I do not understand what this might
mean and how to render it properly:

#flex-cont
{
  display: inline-flexbox;
  flex-direction: row;
  vertical-align:baseline;
  flex-align: end | stretch | start;
}

I believe that the only consistent scenario for display: inline-flexbox;
is the one where vertical-align is the only property that defines vertical
alignment of element itself and its children.

For display:flexbox elements ( not inline blocks ) vertical-align
interpretation
is even simpler. For such flexboxes vertical-align defines exactly what you have
for 'flex-align' at the moment. And vertical-align defined on
individual <#flex-item>s
describes vertical alignment of their content. As in table-cells.

So vertical-align is actually better describes what you tried to define by
flex-align/flex-item-align. At least less controversial.

System will be complete if we will define also this:
horizontal-align: left | right | center | start | end | baseline;

We need horizontal-align anyway in order to define <center> layout
in CSS:

center {
   display: block;
   horizontal-align:center;
}

horizontal-align is interpreted by flexboxes as yours flex-line-pack.

To be direction agnostic vertical-align and horizontal-align may
have aliases - in the same way as margin-start is an alias for
either margin-top or margin-left.

>
>> If vertical-align for some reasons does not comply flexbox ideology then
>> how flex-item-align and vertical-align shall interact? For example what this
>> will mean:
>>
>> el {
>>  flex-align: bottom;
>>  vertical-align:baseline;
>> }
>>
>> ?
>
> They don't interact.  They do completely different things.  (And,
> assuming that "el" is a flexbox item, vertical-align has no effect on
> it.)

They do interact and moreover they compete for the position of
the same elements. See my sample above.

Block alignment is a universal concept and use by pretty much
any layout manager. Consider display:grid element defined as:

#grid {
  display: grid;
  grid-columns: 200px 200px;
}

that is placed inside 600px container. What property shall be used
to define alignment of grid content in this case? Some new alignment
property will be invented?

I agree with Elika here - that alignment zoo is absolutely not acceptable.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 20 April 2012 06:52:10 UTC