W3C home > Mailing lists > Public > www-style@w3.org > April 2011

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

From: Oli Studholme <w3-style@boblet.net>
Date: Sat, 30 Apr 2011 17:26:20 +0900
Message-ID: <BANLkTi=4dvuaAZt7U66iaStXo_jB+GAbNw@mail.gmail.com>
To: www-style <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT