css3 - Is there a way(formula) to calculate absolute size of flex elements described with flex-grow, flex-shrink and flex basis? -
i made small demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html
there 2 flex items in flex container
- flex: 1 2 1000px;
- flex: 1 1 100px;
absolute width of flex container - 500px;
finally, can see, width of flex elements are:
- 421px
- 79px
my question: there way mathematically describe calculated sizes (with formula)?
the closest thing formula algorithm in spec:
http://www.w3.org/tr/css3-flexbox/#resolve-flexible-lengths
i don't think can described in formula. can cover easy cases formula, gets bit more complex (and requires multiple loops of algorithm) when elements have min-width
or max-width
constraints.
side note: flexbox spec make small change flex-grow
, flex-shrink
behavior, they're treated more percentage when sum less 1. (so e.g. flex-grow: 0.1
never give more 10% of free space, if you're child.) proposal described here: http://lists.w3.org/archives/public/www-style/2013oct/0246.html
Comments
Post a Comment