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

  1. flex: 1 2 1000px;
  2. flex: 1 1 100px;

absolute width of flex container - 500px;

finally, can see, width of flex elements are:

  1. 421px
  2. 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

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -