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 00:59:45 UTC