[css3-flexbox] Should flexbox cildren flex by default? or, how should preferred-size=auto be calculated for flex()

Hey All,

I’ve been thinking about the new Flexbox spec, and something that’s
undefined atm is what preferred size: auto means for text blocks, such
as <p> — basically how wide is <p> etc containing text when it’s a
flexbox child. For text blocks I’d expect flex would add to the
element’s width. For replaced content like an image I’d expect that
flex would be added to margins instead.

The old flexbox spec used the length of all text on one line as the
preferred width of a text block, which was both unintuitive and gave
unexpected results[1]. The workaround of setting width:0; and letting
flex dictate the width made things work as I expected but was also
unintuitive.

For the new flexbox spec I assumed that given the current default
flex() value of flex(1,0,auto), that text blocks would flex by
default. For example, for a default (lr) flexbox I’d expect these
three paragraphs to align horizontally and flex to take 1/3 of the
div’s width:

div {display: flexbox;}
<div>
  <p>a b c</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>http://dev.w3.org/csswg/css3-flexbox</p>
</div>

If auto is 0 this works as I expected, with each paragraph positively
flexing equally to fill the space available, assuming that each
paragraph’s min-width is smaller than 1/3 of the div’s width.
Alternatively we could use min-width or max-width as the default
length for the paragraphs. Min-width is the width of the longest word,
and each paragraph in my example has different values: 1, 11 and 28
characters respectively. Using these values for auto means the
paragraphs will be slightly different widths (min-width + 1/3 of
remaining space), not what I’d expect.

The other option would be for auto to use max-width (the width of the
container). This makes display:flexbox the same as display:block until
a flexible width is specified, and makes flexbox children inflexible
by default, which seems wrong to me. Note that in this case we can
easily replicate my expected behaviour by assigning widths in fl units
— width:1fr; is equivalent to width:flex(1,0,0px);. However I’d expect
that flexbox would flex by default (“The defining aspect of flexbox
layout is the ability to make various lengths of the flexbox items
flexible”). Also I expect I’d mainly use flexbox for allocating space
via flex, rather than e.g. reordering children or controlling their
alignment.

Tab mentioned that flexing by default means that the default meaning
of auto (container width for text blocks, intrinsic width for replaced
content) isn’t available. In this case would display:block; for the
relevant child be sufficient, or would that kill any other flexbox-*
properties? Alternatively if positive-flex is 0 could this be used to
trigger default (non-flex) layout?

So, is it better for flexbox to flex by default, and how should
preferred-size=auto be calculated for text blocks?

Thanks for your time

peace - oli

PS I hope that makes sense — I’m a little unsure if I understand the
current spec completely, e.g. I’d love someone to explain the
difference between absolute and relative flex concepts with examples

[1] http://oli.jp/2011/css3-flexbox/

Received on Saturday, 30 April 2011 08:27:29 UTC