Re: [css3-flexbox] cascading of flex()

When the preferred width is used in flexes it changes flex distribution rules.

These:

  width:flex(1 100px) and 
  width:flex(1) and 
  width:100px

produce significantly different results in almost all cases.
I don’t think that it is a good idea to use preferred width as a fallback value. In most cases it will be just useless. 

Fallback of flexes to ‘auto’ values is OK as far as I can tell (I am using this approach). No problem seen so far.
And yet such fallback is expectable – if property value is not recognized it is treated as ‘auto’. 
For example not all CSS properties that accept lengths accept percent values, auto is used instead. 
Flex handling should be consistent with such cases I think.

-- 
Andrew Fedoniouk

http://terrainformatica.com




From: Alex Mogilevsky 
Sent: Tuesday, November 08, 2011 5:02 AM
To: mailto:www-style@w3.org 
Subject: [css3-flexbox] cascading of flex()

When flex(100px) is specified in a selector, we can’t know if it will be applied to a flexbox item, so in cascading it has to be valid always and win over other valid values of lesser specificity.

 

Then 

 

div { width:200px; width:flex(100px); }

 

must always be computed into “width:flex(100px)”, even outside flexbox.

 

Now, when happens to not be a flexbox, what is computed value of ‘width’ ?

 

I see two options:

1)      100px (the ‘preferred’ part of flex)

2)      auto (initial value)

200px is not an option – it would be very difficult to require that parent of target is known when rule is parsed.

 

I would prefer the answer to be 100px – the “preferred” component of flex(). The outcome may be odd when “width:flex(1)” becomes “width:0” in non-flexbox layout… Even so I like it better than discarding specified preferred width.

 

It seems that use case of parent element switching layout from flexbox to something else (or from horizontal flexbox to vertical) is very valid. Then it would make sense to specify width as “flex()” and simply have flexibility ignored when not in flexbox primary direction…

 

Also consider ‘inherit’:

 

<div style=”display:flexbox”>

                <div style=”width:flex(1 100px)”>

                                <div style=”width:inherit”></div>

                </div>

</div>

 

However artificial the case is, it seems wrong that the inner div would not get a usable specified width while width is specified on the parent, just with additional information.

 

I propose that the spec defines that flex(<preferred-width>) is treated as the specified <preferred-width> when applied to non-flexbox element.

 

Any arguments for ‘auto’ ?

 

Note that there will be no surprise in the outcome if flex() is defined to not change the default width/height. If “width:flex(1)” leaves ‘width’ at its initial value and simply adds flex where applicable. I would not be opposed to such change.

 

Alex