Re: Publishing the flexible box model

Robert O'Callahan wrote:
> On Sat, Jun 7, 2008 at 7:41 AM, fantasai 
> <fantasai.lists@inkedblade.net <mailto:fantasai.lists@inkedblade.net>> 
> wrote:
>
>     I expect you'd keep two values for the margin: the fixed length,
>     and the
>     flex value. Collapsing two margins calc(2* + 100px) and calc(1* +
>     150px)
>     would give you a collapsed margin of calc(2* + 150px). The 150px
>     is always
>     applied, and the flex value absorbs its quota of additional space
>     when the
>     available space is distributed.
>
>  
> It's more complicated than that because of the rules for negative 
> margin collapsing. You'll actually need at least three values, the 
> min-negative, the max-positive, and the flex.
Negative margins is not a problem either. Negative margin simply 
increases free space available for flex distribution.
At the step of flex computation you will treat them as undefined margin 
values.
>
> There will also be interesting interactions between flex-units and 
> clearance.
> <div style="overflow:auto;" class="block-formatting-context">
>   <div style="height:1*;">Hello</div>
>   <div style="float:left;">Kitty</div>
>   <div style="clear:left;">Kitty</div>
> </div>
> Since we don't know the vertical positions until the end, we can't 
> know whether to clear or not. If we treat 1* as auto while we compute 
> clearance, the results are going to be really bad when we apply flex 
> at the end.
As I said floats are not the best friends of flexes. But if flexes and 
the flow attribute will be implemented you will see a dramatic reduction 
of floats uses.
All cases when floats are used currently for horizontal block layout 
purposes can be implemented significantly better and more reliable with 
flexes.

So this particular markup/styling (mix of floats/flexes) you have 
provided will not be required.
You will declare it as:

<div style="overflow:auto;" class="block-formatting-context" 
style="flow:horizontal-flow">
  <div style="height:1*;">Hello</div>
  <div style="clear:left; height:1*">Kitty</div>
  <div style="height:1*">Kitty</div>
</div>

You should see it as:

| ------------ |
|    Hello     |
| ------------ |
| Kitty1|Kitty2|
| ------------ |

where Hello and Kitty1/2 blocks will have the same height.
and Kitty1/2 blocks will fill container width equally (as width:auto == 
width:1*)

flow:horizontal-flow here  is a multiple row layout where . Row breaks 
happen on
blocks with clear:left/right/both. vertical flexes are computed against 
height of the row.

>
> I'm not saying these difficulties are insurmountable. But I hope it's 
> clear that integrating flex-units into the existing CSS layout specs 
> would create many issues that have to be analyzed and specified. It's 
> not good enough just to wave our hands and say it's all obvious; the 
> issues raised already are not obvious and we've only just scratched 
> the surface.
Opportunities that flexes provide outweigh possible issues 
significantly. I wish flexes were in CSS from the very beginning.
That would simplify spec significantly (in particular all about floats). 
And yet it will make obsolete that holy-wars about tables
used for layout purposes. Flexes give even more than you can do with 
html tables.
As I said in 3 years that we are using flexes we didn't met anything 
that could not be resolved in boundaries of
CSS constraints/ideology.
>
> (It's great that Andrew has an implementation, but it's often easier 
> to implement a feature and say that whatever the implementation does 
> is the desired behaviour, than it is to write a real spec with all the 
> interactions worked out.)
>
Single implementation is just proves that flexes are feasible. Two 
implementations prove that there are at least two persons who understand 
the concept.
> So, we need a spec proposal that carefully considers all the possible 
> interactions between flex-units and CSS layout where flex-units can be 
> used, and describes how issues (such as the ones already raised) are 
> resolved.
>
I agree. The problem is that I am personally is not that good in writing 
specs. If someone will help me than we can come up with something.
In principle it not going to be very complex definition. The whole idea 
is very simple as it is all about position:static layouts.
(There is a desire to be able to define something like { position:fixed; 
left:1*; ... bottom:1* } to position element in the center of the view but
this can be left for the next stage)

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 6 June 2008 22:49:56 UTC