Re: [css3-flexbox] getting multiline flexbox back into the spec

>-----Original Message----- 
>From: Alex Mogilevsky
>Sent: Tuesday, July 26, 2011 3:25 PM
>To: Andrew Fedoniouk ; fantasai ; www-style@w3.org
>Subject: RE: [css3-flexbox] getting multiline flexbox back into the spec
>
>± From: Andrew Fedoniouk [mailto:andrew.fedoniouk@live.com]
>± Sent: Monday, July 25, 2011 7:17 AM
>±
>± >
>± >Option 7.3
>± >
>± >    flex-flow: [ rows | columns | horizontal | vertical ] ||
>± >               [ normal | reverse | ltr | rtl | ttb | btt ] ||
>± >               [ wrap | wrap-reverse | wrap-left | wrap-right |
>± > wrap-down| wrap-up ]
>± >
>±
>± What is the difference between
>±
>±   flex-flow: rows;
>±
>± and
>±
>±   flex-flow: horizontal wrap;
>
>'rows' is the logical direction. It is vertical when used in vertical text.
>'wrap' is off by default, adding that keyword enables wrapping.
>
>I see that it can be confusing that "rows" and "columns" are plural, even
>though usually used on a single-line flexbox. Perhaps they should be 'row'
>and 'column'

We should ask people who use ttb writings what kind of meaning they
assign to 'row' and 'column' terms. I suspect that 'row' is still something
that is horizontally oriented. As 'column' is something vertical no matter 
what.

I still don't think that logical values for directionality like this
will give users any benefits. Vertical and horizontal writing systems
are not symmetrical. In general you cannot just say writing-mode: ttb
and hope that everything will be magically in place using all nuances
of traditional TTB layouts - you will need to tweak many other things.

I believe that need to define explicitly your intention like:

#container:dir(ltr,rtl)
  { flex-flow: horizontal; }
and
#container:dir(ttb)
  { flex-flow: vertical; }

is really nothing if to compare with the set of other things you will
need to do to show the same DOM in ttb fashion.


>
>±
>±   flex-flow: stack;
>±
>± Children replaced one on top another. Intrinsic dimensions of
>± flex-flow: stack; container are equal to tallest/widest child dimensions.
>± This kind of layout is used by tabs container and is not achievable in 
>CSS
>± at all at the moment.
>
>'stack' is a very useful layout type, certainly needs to be supported. It
>is currently implemented by Grid layout:
>
><div style="display:grid">
><div id="one">...</div>
><div id="two">...</div>
><div id="three">...</div>
></div>
>
>Will do exactly what you want for stack:
>- initial values for grid-column and grid-row are 0
>- initial values for grid-column-span and grid-row-span are 1
>- grid will size to biggest child in both dimensions, then stretch children
>to be same size.
>
>It may not be intuitive to use grid to create stack. Perhaps it would be
>reasonable to support same behavior on flexbox. I’ll add it to issues.

Seems like I do not understand the purpose of grid layouts if you
allow elements there to occupy the same "cell". Such setup
is against existing HTML/CSS practices. Table where multiple
cells positioned in the same spot looks at least non-intuitive.

>
>
>±   flex-flow: flow(1 2,
>±                   1 3);
>±
>± The flow function is an explicit defintion of how container replaces its
>± children.
>± The flow(row1, row2, ..., rowN ) "function" contains comma separated list
>± of row defintions. Each row contains white space separated list of
>± integers - indexes of elements that will be replaced in the cell. 
>Elements
>± can span multiple cells.
>
>Interesting. I think functionality involving "cells" and "span" belongs to
>grid.
>

Consider something simple as:
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Then
  flex-flow: horizontal;
  flex-flow: vertical;
is an equivalent of:
  flex-flow: flow(1 2 3);
  flex-flow: flow(1,2,3);

But this:
  flex-flow: flow(1 3 2);
and this
  flex-flow: flow(1,3,2);

Is not very far conceptually from the above - it is the
same horizontal/verical layout but with different order
of elements. My practice shows that such simple mechanism is
quite useful and popular.

If I understand purpose of the Grid module correctly it is close
to position:absolute or floats. flex-flow: flow() is purely
position:static layout that uses exactly same principles as
flex-flow: horizontal/vertical.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 27 July 2011 03:10:28 UTC