Re: [css-flexbox] and vertical-align

On Thu, Apr 19, 2012 at 11:51 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> 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.

No, this is incorrect.  There is no intrinsic connection between how
you align an element in its parent, and how you align the element's
children.  I'm not sure why you think they're connected.

Your second example above is easy to define and compute, though I
don't vouch for how much sense it necessarily makes - if none of the
flexbox items are baseline aligned, then the flexbox's own baseline is
that of its first child.  That's what 'vertical-align' uses to align
it in the line.


> 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.

It would be silly to use "vertical-align", define a
"horizontal-align", and plan to create direction-agnostic versions of
them sometime in the future, when we know we need direction-agnostic
versions *now*, today, for the current Flexbox spec.


>>> 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.

I'm not sure what else I can say.  You're wrong.  My explanations
above are about all I can offer.  Your mental model appears to be
broken slightly.


> 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.

That's well-defined by the Grid spec, and very simple - grid lines are
measured from the start/before edge of the box.

~TJ

Received on Friday, 20 April 2012 18:16:54 UTC