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

Re: [css-flexbox] and vertical-align

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 19 Apr 2012 23:51:36 -0700
Message-ID: <CALRQH791jbOctPgM2cQ2msMhfks-2EQYN_qZ8LZai5G-FwVSTw@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
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>

will be aligned to same line - baseline of  the <p>'s

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:

  display: inline-flexbox;
  flex-direction: row;
  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
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 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.

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

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