Re: [css3-flexbox][css3-grid] Inline replaced elements as grid items and flexbox items

>
>-----Original Message----- 
>From: Alex Mogilevsky
>Sent: Friday, May 13, 2011 4:53 PM
>To: David Hyatt ; www-style@w3.org CSS
>Subject: RE: [css3-flexbox][css3-grid] Inline replaced elements as grid
>items and flexbox items
>
>> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On 
>> Behalf
>> Of David Hyatt
>> Sent: Thursday, May 12, 2011 3:11 PM
>>
>> Both CSS3 flexbox and CSS3 grid specify that an inline replaced element
>> can act as a grid item or flexbox item.  This seems very strange to me,
>> especially in the case of a vertical flexbox.
>> ...
>> I sort of get the motivation for it (i.e., avoiding having to say
>> display:block explicitly just to flex a control), but it seems like we're
>> trying to guess the author's intent here.  I can envision use cases where
>> the author would have just been thinking in terms of inline progression
>> and other cases where the author would have wanted the objects to flex.
>
>Yes, the definition in earlier flexbox spec (and I believe webkit
>implementation) is cleaner: block children are flex items, anything else
>must be wrapped into a block or made a block.
>
>In practice, this was the #1 usability issue for new developers. Flexbox is
>clearly intended to lay out controls, yet simply placing controls leads to
>unexpected results and confusion.
>
>Something like this (using old syntax):
>
><div style="display:box; box-direction:vertical;">
><button>yes</button>
><button>no</button>
><button>maybe</button>
></div>
>
>produces horizontal layout unless buttons are blocks, leaving impresson
>that "direction" property is broken.
>
>And this
>
><div style="display:box; box-direction:vertical;">
><div style="box-flex:1;">one</button>
><img style="box-flex:1;" src="two.jpg">
><div style="box-flex:1;">three</button>
></div>
>
>Will produce vertical layout by accident, but "box-flex" will not have any
>effect on the image.
>
>This kind of issues is likely to be very common. At the same time I can't
>think of what is there to be gained by not accepted controls and images as
>flexbox children.
>
...
>
>So that is the reasoning that brought us to accepting replaced inline
>blocks as flexbox items. We initially suggested that any inline blocks
>should work, what we have is a compromise, but if we wean to revisit the
>decision I would again suggest that inline blocks are included for
>consistency...
>

As <button>,<img>,<textarea>,etc. are display:inline-block
elements then how about these rules:

1. To treat all display:block, table, inline-block, list-item elements as
   flex boxes. display:inline and text content will be wrapped into
   boxes.
2. If some immediate child of flex box container is declared as
   display:inline-block !important; then it and its inline siblings
   will be wrapped into boxes for flexing purposes.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 14 May 2011 02:34:00 UTC