Hello I've been trying to familiarise myself with the new Flexible Box Layout stuff now recent browser support is getting good. I thought I would start with a layout I am often asked to do (or some variant):
- A footer with three columns, the 1st flush against the left edge of the footer, the 2nd exactly centred in the footer, and the 3rd flush with the right edge of the footer. The complication being that the 2nd and 3rd columns have content that should be left aligned and that may be quite short in length, typically a series of links. The easiest way to explain is if you look at this JSFiddle http://jsfiddle.net/3eajh33k/embedded/result/ at a window width of around 1200px. Note that the last li in the 3rd column ("SISTER COMPANY WITH A LONG NAME") is flush against the right edge of the footer, and that in the 2nd column if you were to imagine a left border on the ul it would be exactly in the centre of the footer. My problem is that if I reduce the window size until the final li in the 3rd column wraps I no longer have the layout I want. I'm not sure at that point how the content width of the li is being calculated. I thought it still would have a width equivalent to "auto", i.e just wide enough to contain its content and no wider. That way the last character of the line would still be flush against the right edge of the footer. Clearly that is not the case. You can see the JSfiddle with source here: http://jsfiddle.net/3eajh33k/ Does anyone have any suggestions? (Does anyone have the faintest idea what I'm talking about? ;-) Lastly, does anyone know a really good explanation of the properties flex-grow and flex-shrink? The explanation at both http://www.w3.org/TR/css3-flexbox/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes is far from clear to me. I understand that the value specifies how much the box can shrink or grow, but other than that I have no idea what exactly is calculated or how. Thanks in advance! Best, Darren ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
