[css3-flexbox] anonymous flexbox children

Flexbox spec requires that non-block content is wrapped into anonymous blocks which become anonymous flex items. This is apparently designed to follow the philosophy that no content is ignored by layout which sounds very reasonable.

I'd like to clarify what exactly should be considered an anonymous block there. It may be different from how anonymous blocks are formed in text flow.

Consider this markup:

 <div id="flexbox" style="display:flexbox">
  1
  <div>2</div>
  <span>3</span>
  <div>4</div>
  5
  <span>6</span>
  7
  <div>8</div>
  9
  <span>
   10
   <div>11</div>
   12  
  </span>
  13
 </div>

I expect that this will form flex items as follows:

 <div id="flexbox" style="display:flexbox">
 <!-- item1 (anonymous): plain text -->
  1
 <!-- item2 (block) -->
  <div>2</div>
 <!-- item3 (anonymous): inline element -->
  <span>3</span>
 <!-- item4 (block) -->
  <div>4</div>
 <!-- item5 (anonymous): plain text with inline elements -->
  5
  <span>6</span>
  7
 <!-- item6 (block) -->
  <div>8</div>
 <!-- item7 (anonymous): plain text with inline elements -->
  9
  <span>
   10
   <!-- NOT A FLEX ITEM: block nested inside inline element -->
   <div>11</div>
   12  
  </span>
  13
 </div>

The important difference from anonymous blocks in text is that div "11" which is a block inside an inline element is not considered a separate item for flexbox layout, because it is not a direct child of a flexbox.

It is possible to define anonymous block creation in other ways. My preference is the way shown above, as opposed to more inclusive models that could allow elements participating in flexbox layout to transcend element tree structure. That is possible to but it would complicate both implementation ant the spec, and I don't see any practical reason for that being necessary.

What do you think?

Alex

Received on Monday, 7 February 2011 18:47:17 UTC