RE: Flexbox Draft, with pictures!

Now there is a good collection at http://www.xanthir.com/etc/flex-use-cases.html , thanks for putting it together!

1: agree

2, 3: It is not impossible actually. Consider this:

 hbox > * { display:table-cell; vertical-align:middle; }

Using a table is not pretty but it gets the job done. We wouldn't need a table if 'vertical-align' applied to any block. Why not do that first?

4: I don’t think the code in either column does what the challenge wants. 
- in current draft it is possible to either stretch or align baseline but not both.
- the speculative code in "proposed" means "align children of flexbox item on baseline" but it would be wrong to expect that baseline to relate to baseline of its siblings.

8,9: agree (although not sure how important it is though)

10: relative is probably better in second column anyway, but if you want to use FL you want to also decrease bottom margin by 5px to avoid layout change:

 hbox > :hover { margin: calc(5px + 1fl) 0 calc(-5px + 1fl); }

11: I don't get the use case. How is it different from simply centering?

12, 13, 14, 15: second column code won't work if there is flex and max-width on children:

 <div style="display:box; width:200px; box-pack:end"> 
 <div style="max-width:150px; box-flex:1">
 </div> 
 </div>

Will produce a right-aligned 150px-wide child. But

 <div style="display:box; width:200px; padding-left:1fl"> 
 <div style="max-width:150px; box-flex:1">
 </div> 
 </div>

Will get you a right-aligned 100px-wide child.

This will be different of course only if max-width keeps limiting effect of flex. If we consider max-width only before flex (as has been proposed) both solutions will have same effect.

15: I like box-pack version much, much better. Also this doesn't work with max-width, unless there is a way to assign flex-group to a margin.

16: 
current draft: it is possible with generated content on first and last child
proposed draft: the code assumes horizontal margin collapsing (which I am not a fan of). Without that it is still possible but is similar to 12-15. 

17: this exact case should also work with generated content, but if you happen to want anything more complicated (like 1/3 margin somewhere) current spec won't do it.

18: also

 hbox > .end-packed:before { box-flex: 1fl; }

19: agree

20: very interesting case. Both versions should work (assuming min-width:fit-content works). Space distribution algorithm may be tricky when there is more space than content width but less than needed to make them all equal.

21: generated content would do it too 

22: I think the "challenge" describes what "current" is doing. "proposed" also flexes margins but it is not called for.

Received on Wednesday, 2 June 2010 00:52:47 UTC