Thanks for your reply, Eric. In my original example, the elements that aren't
quite laying out as I wanted (#external>ul) have the following flex box values:
#external {
-webkit-box-flex: 1;
-webkit-flex: 1 1 30%;
-ms-flex: 1 1 30%;
flex: 1 1 30%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#external > * {
-webkit-box-flex: 0;
-webkit-flex: initial;
-ms-flex: initial;
flex: initial;
}
flex: initial;
is equivalent to
flex: 0 1 main-size;
which is the same as setting
flex-grow: 0;
flex-shrink: 1;
flex-basis: main-width;
So my understanding is that the flex layout will begin with the natural width
of the ul, will never grow that, but may shrink it. Now what puzzles me is how
the natural width of the ul is being calculated. In this screenshot, with the
ul highlighted by the inspector, I cannot quite account for the whitespace that
I have outlined in red:
http://www.dzr-web.com/images/flexbox-puzzle.png
Best, Darren
On 9 Oct 2014, at 23:39, Eric <e...@minerbits.com> wrote:
> 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
> 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/
