Re: [css3-flexbox] multiline

Gentlemen, do you considering case like this:

<p>Some text <input style="size:*"> and more.</p >

Where the "size:*" is width/height:1fr | 1fl | etc.

In this case the <input> is expanded inside the line box and so
it will take all available width that is left inside line box after text
replacement and its height will be set to fill line box height in full.

Thus if you have style

p > input { size:*; }

and markup

<p>Some text <input>, image <img src="40x40px.png"> and <input>.</p >

you will see inputs of the same width and and of the same height
that would be equal to tallest element in the line box (img here 
presumably).
Letter 'S' will be at the left of line box and trailing '.' at its right 
boundary
(if min constraints will allow to replace the text in single line).

I am not sure if current/used/implemented version of [css3-flexbox] allows
to do that  so asking.

This multiline idea you are discussing... is it conceptually different
from the above? If no then probably it is better to just allow flex units
inside line boxes, no?

And yet about multiline flexes (in may case that is flow:horizontal-flow) .
As soon as you allow multiple lines (rows in fact) then you have to have
mechanism for explicit row breaks.

In my case existing clear:left|right|before|after|both is used for that 
purposes
as it defines exactly this concept.

What you are going to used for 'row breaks'?
Without this feature multi-line flex box is barely useful to be honest.


-- 
Andrew Fedoniouk

http://terrainformatica.com




-----Original Message----- 
From: Tab Atkins Jr.
Sent: Wednesday, April 13, 2011 10:17 AM
To: Alex Mogilevsky
Cc: www-style list
Subject: Re: [css3-flexbox] multiline

On Tue, Apr 12, 2011 at 7:04 PM, Alex Mogilevsky <alexmog@microsoft.com> 
wrote:
>> What about flexing in the length/extent axis in the presence of multiple
>> lines, when the flexbox has a definite size in that direction?  In my
>> original algorithm, I determined the extent of each line by looking for
>> the element in each line with the largest size in that axis, and let the
>> last line flex out to fill any leftover space in the flexbox.  That is, 
>> if
>> a flexbox is 100px high, and has two lines of 40px tall items, the first
>> line would just be 40px tall, while the latter would flex in a 60px 
>> space.
>> This might not be the best solution.
>
> I use exactly same flexing algorithm in both directions.
> If 'box-align' is 'stretch', each line is considered to have positive flex 
> of 1 (there is no negative flexing for lines, we don't want them to 
> overlap)
> If 'box-align' is any other value, lines have flex of 0 and are packed in 
> the direction of alignment ('box-align' is automatically mapped to 
> transverse packing).

Ah, okay, so the question of what to do with leftover space in the
flexbox is irrelevant, because if you pack the lines to the top of the
flexbox, the items are also packed to the top of each line, and you
can't tell if the last line is taller or if there's just unused space
in the flexbox.


> I don't particularly like reusing one property for two settings, it really 
> should be a separate property
>
>        flex-line-pack: before|middle|after|justify
>
> (with same behavior, unless we can think of something better)

Yeah, something like this would be good.  You need another value to
indicate that the lines should flex themselves, but otherwise it's
good.


When you have box-align:stretch, and thus flex the lines, what's the
preferred height for the lines?  0, or the largest height among the
items in each line?

~TJ

Received on Thursday, 14 April 2011 02:45:11 UTC