Darren, I've been working with flex-box for some time now. It does take a bit of re-thinking how layout works.
flex-basis is the sub-property you'll need for this issue - http://css-tricks.com/almanac/properties/f/flex-basis/ Solved By Flexbox <http://philipwalton.github.io/solved-by-flexbox/?utm_source=Responsive+Design+Weekly&utm_campaign=ff809ca1ec-Responsive_Design_Weekly_125&utm_medium=email&utm_term=0_df65b6d7c8-ff809ca1ec-58974505&goal=0_df65b6d7c8-ff809ca1ec-58974505> Some commonly used layouts translated to flex-box Hope those help, I have a lot more if you need them. Just keep practicing, it'll click with you soon. Eric > On October 9, 2014 at 1:10 PM Darren Brierton <darren.brier...@gmail.com> > wrote: > > > 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/ ______________________________________________________________________ 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/
