RE: Flex items growing unless they wrap to a line of their own

± Tab Atkins Jr. [mailto:jackalmage@gmail.com]
± On Mon, Jan 12, 2015 at 9:53 AM, Jared Wein <jaws@mozilla.com> wrote:
± > On Mon, Jan 12, 2015 at 12:39 PM, Tab Atkins Jr.
± > <jackalmage@gmail.com>
± > wrote:
± >>
± >> On Fri, Jan 9, 2015 at 3:42 PM, Jared Wein <jaws@mozilla.com> wrote:
± >> > Hi www-style,
± >> >
± >> > dev.w3.org/csswg/css-flexbox-1/#flex-lines example 9 shows four
± >> > flex items that have flex-grow:1; inside of a container that has
± >> > flex-wrap:wrap; applied.
± >> >
± >> > I have recreated the example locally, but I would like to alter it
± >> > so that if the container resizes and forces its last child element
± >> > to wrap to a line of its own, that the element will not grow to the
± >> > full width of the line.
± >> >
± >> > As ASCII art, this is the desired outcome when the container is
± >> > wide enough to fit all children on a single line:
± >> > -----------------------------------
± >> > |[   AAA   ][   BBB   ][   CCC   ]|
± >> > |                                 |
± >> > -----------------------------------
± >> >
± >> > This is the desired outcome when the container is too narrow to fit
± >> > all children on a single line:
± >> > ----------------------------
± >> > |[    AAA    ][    BBB    ]|
± >> > |[CCC]                     |
± >> > ---------------------------|
± >> >
± >> > Is this type of layout possible with display:flex or a different
± >> > layout algorithm?
± >>
± >> At the moment, no, this is not possible.  This is a high-priority
± >> item for Flexbox 2, though:
± >> <https://wiki.csswg.org/spec/css-flexbox-2>
± >
± > Thanks. I should note that another desired result would be the following:
± >
± > ----------------------------
± > |[    AAA    ][    BBB    ]|
± > |[    CCC    ]             |
± > ---------------------------|
± 
± That is, in fact, approximately what you'll get with my suggested feature.  (It'll
± spam "phantom" items on the last line of the same size as the last item, do
± stretching with them, then remove them for rendering.  If AAA, BBB, and
± CCC are all approximately the same size, then CCC will end up approximately
± the same size as AAA on the previous line.)

Not exactly, though. What he want seems to be a "text-align-last" for general-purpose alignment. I still think it's worth supporting that, because it's rather easy to implement in the browser and can't be polyfilled easily.

Received on Friday, 16 January 2015 22:31:09 UTC