RE: Flexbox Draft, with pictures!

Great, use cases rule!

It sounds reasonable to not cutting features while the rest of the spec settles. I understand this particular use cases, it is true that it is impossible to produce in any other way in CSS. I am having trouble visualizing it and agreeing it is a good design though... 

> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of fantasai
> Sent: Tuesday, May 25, 2010 5:59 PM
> To: Tab Atkins Jr.
> Cc: David Hyatt; www-style list
> Subject: Re: Flexbox Draft, with pictures!
> 
> On 05/25/2010 05:16 PM, Tab Atkins Jr. wrote:
> >
> >> (8) I would cut multiple lines from the draft.  No implementation
> >> does them, they greatly complicate things, and there's not much benefit.
> >> We have multi-column layout for wrapping vertical flow, and we have
> >> inline-block, etc. for wrapping horizontal flow.  I'm unconvinced
> >> that we need wrapping flows that also flex in a first draft of this spec.
> >
> > Since nobody does it, you yourself have said that it has a weak
> > use-case, and it really does complicate things significantly, I'm okay
> > with this.  I do want to address this at some point for the use-case
> > of tabs, but I'm okay with v1 not having the ability to do multiple
> > lines.
> 
> Use case: online catalog. I have an arbitrary number of
>    <div class="item">
>      ...
>    </div>
> in my search/category results. Each item has a picture, a description, a price,
> and potentially a sale price. Notably, the descriptions are of arbitrary length.
> 
> I want to draw a box around each entry and give it a width of ~20em.
> Then I want to tile the items to elegantly fill the available space in the page,
> whether it's a narrow window with only room for one tile, or a widescreen
> with enough space for 6 or 7.
>    * I want to fill across horizontally, then break to the next line,
>      and fill again, until all my tiles have been used up. The last
>      line may have less tiles than the filled lines.
>    * I want the tiles to flex to completely fill the available
>      horizontal space.
>    * I want each row to be *even*, i.e. the boxes on a row are all
>      the same height regardless of differences in description length.
> 
> I think this is a reasonable use case. It's a layout I've seen on many shopping
> sites, except I've allowed it to adapt to available screen real estate, arbitrary
> font sizes, and dynamically-generated content instead of being frozen at the
> designer's sample settings.
> 
> I think we do want to encourage this kind of fluid design, no?
> So how should I do this in CSS, if not with multiline flexboxes?
> Because afaik current layout techniques cannot create this layout.
> 
> > What do other people think?  I can remove it, I just have to do a
> > decent bit of work to back it out of the distribution algo.
> 
> I would prefer to see it considered at least until we're ready to stabilize the
> draft. I think it's something we're likely to want, so I don't want to see us
> design the rest of flexbox without considering the effects on multiline.
> 
> ~fantasai

Received on Wednesday, 26 May 2010 08:43:30 UTC