Thanks for replying Chris. My answers are below: On 9 Oct 2014, at 18:59, Chris Rockwell <ch...@chrisrockwell.com> wrote:
> >> (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? Yes, I was mostly talking about the 3rd column. What I was hoping for was that the width of the li would be just wide enough to accommodate the wrapped line and no longer, and that as the parent container has justify-content: flex-end, that everything would scoot over to the right so that final word of the line before the wrap would still be flush against the right edge of the footer. It looks to me that the width of the li is determined by the point at which the line wrap is forced, as opposed to the wrapped content. I understand what the designer is hoping for: that, whether there is word-wrapping or not, in the third column the last character of the longest line should be flush against the right edge. Maybe it is not possible. > >> 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/? Yes, I have, thanks. It's pretty good, but I still don't feel I have a full grasp of how flex-grow and flex-shrink (especially the latter) work. > > 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/
