>> (Does anyone have the faintest idea what I'm talking about? ;-) I'm not sure I follow, actually. Are you only talking about the 3rd column, #external? What do you expect to happen when the width of the container forces the li to break to another line?
>> Lastly, does anyone know a really good explanation of the properties flex-grow and flex-shrink? Have you seen http://css-tricks.com/snippets/css/a-guide-to-flexbox/? Chris Rockwell On Thu, Oct 9, 2014 at 12:27 PM, Darren Brierton <darren.brier...@gmail.com> wrote: > 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/ > ______________________________________________________________________ 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/
