- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 17 May 2010 14:51:49 -0700
- To: Andrew Fedoniouk <news@terrainformatica.com>
- Cc: robert@ocallahan.org, Alex Mogilevsky <alexmog@microsoft.com>, Adam Del Vecchio <adam.delvecchio@go-techo.com>, www-style@w3.org
On Fri, May 14, 2010 at 7:47 PM, Andrew Fedoniouk <news@terrainformatica.com> wrote: > I've explained the problem here: > http://lists.w3.org/Archives/Public/www-style/2010May/0210.html > > In brief: > You cannot use flexes in calc() by its definition: > The calc expression is computed at the same time as 'em' lengths > and percents are computed. > Flexes are getting resolved *after* all other lengths are determined > so after calc() of any sort. > > So "margin is a mixture of fixed and flexible by itself" of yours is not > clear - not clear how such mixture can be defined. If that's a problem, it's equally a problem for %s, since some percentages can't be resolved at computed-value time. > Do you have examples where calc(20px + 1fl) can be useful? You need the ability to do min()/max() (which are resolved at the same time as calc()) to emulate min/max-width for padding/border/margin. Using calc() lets you create additive flexes. For example, the Firefox urlbar and searchbar are "width: calc(fit-content + 3fl)" and "width: calc(fit-content + 1fl)", respectively (and then the inputs inside of each are both "width: 1fl"). > And what would be a result of say this: > calc( (20px + 1fl) / 2 + (10px + 2fl) * 3 )? Exactly what it looks like, after you resolve all the math? 40px + 6.5fl. > consider this: > > <div style="display: block;"> > <div style="display: flexbox; padding-top:1fl;"> > <span>foo</span> > <span>bar</span> > </div> > <div style="float:right" >zot</div> > </div> > > "foo,bar" will be drawn on top of "zot". That is at best. > Flex computation happen *after* float replacements. > > That's why your statement "ruins floats". I still don't understand why this "ruins" anything. Yes, the flexbox and its children will sit underneath the float, just like any normal box (the lineboxes inside the flexbox children don't participate in normal layout, and thus aren't shoved out of the way of the float). If this is a problem, you just make the flexbox a BFC, so it won't overlap the float. Dealing with float-overlaps is already part of any experienced webdev's toolkit. ~TJ
Received on Monday, 17 May 2010 22:53:32 UTC