Re: [css-d] Flex items lose some padding in Firefox

[Philippe Wittenbergh]

> Le 3 mai 2015 à 01:02, David Hucklesby  a écrit :
> 
> Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply the
> padding.

Yes, Chrome / Blink  (and Webkit) is not spec compliant for this (and many 
other things flexbox related). They unprefixed the flexbox code when they 
forked from Webkit) in a fit of holier-than-thou mentality.

> 
>> 
>> PS - don’t forget to add the -webkit- prefixed properties / values for
>> Safari.
>> 
> 
> Actually am applying this on top of inline-blocks via @supports ( flex-wrap:
> wrap ) to prevent old Android versions using it. So Safari is locked out 
> anyway.

What issue (and which old Android) are you seeing? And, you lock out IE 10/11 
as well?

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[Karl DeSaulniers]

Oh ok. I see. 
Me personally, I have not seen the benefits of flex-box in action.
If a hack (as you say) works from IE6 to IE10 and firefox, safari, chrome, iOS, 
etc, etc,
then I don't call that a hack. I call that keeper code.  (:  ))

Well, good luck with your pursuit. 

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On May 2, 2015, at 11:34 PM, David Hucklesby  wrote:

> On 5/2/15 2:52 PM, Karl DeSaulniers wrote:
>> Hi David,
>> Seems a hefty price to pay when you can do the same thing without flex-box 
>> and regular css2.
>> Unless I am missing something, this IS just an expanding column of cat 
>> pictures. Yes?
>> 
>> This pen works in Safari, Chrome and Firefox (on a Mac) with no problems as 
>> far as I could see.
>> LMK if different or if I am missing the point of the exercise.  (:  ))
>> 
>> http://codepen.io/designdrumm/pen/qddQpV
>> 
> 
> Admittedly the motivation was curiosity. But flex-box seems much sturdier - no
> inline-block hacks, nor margin hacks to center floats!
> 
> This is to display thumbnails for photo galleries.
> 
> You are right in that the payoff will only come later, when I can get rid of
> legacy code to reduce both code and maintenance. Just thinking ahead ... :)
> 
> -- 
> Cordially,
> David
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

On 5/2/15 2:52 PM, Karl DeSaulniers wrote:

Hi David,
Seems a hefty price to pay when you can do the same thing without flex-box and 
regular css2.
Unless I am missing something, this IS just an expanding column of cat 
pictures. Yes?

This pen works in Safari, Chrome and Firefox (on a Mac) with no problems as far 
as I could see.
LMK if different or if I am missing the point of the exercise.  (:  ))

http://codepen.io/designdrumm/pen/qddQpV



Admittedly the motivation was curiosity. But flex-box seems much sturdier - no
inline-block hacks, nor margin hacks to center floats!

This is to display thumbnails for photo galleries.

You are right in that the payoff will only come later, when I can get rid of
legacy code to reduce both code and maintenance. Just thinking ahead ... :)

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[Karl DeSaulniers]

Hi David,
Seems a hefty price to pay when you can do the same thing without flex-box and 
regular css2.
Unless I am missing something, this IS just an expanding column of cat 
pictures. Yes?

This pen works in Safari, Chrome and Firefox (on a Mac) with no problems as far 
as I could see.
LMK if different or if I am missing the point of the exercise.  (:  ))

http://codepen.io/designdrumm/pen/qddQpV

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On May 2, 2015, at 11:02 AM, David Hucklesby  wrote:

> So Safari is locked out anyway.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[David Hucklesby]

Thank you Philippe. Responses below:

On 5/1/15 4:55 PM, Philippe Wittenbergh wrote:



Le 2 mai 2015 à 06:50, David Hucklesby  a écrit :

This is the bare bones of a grid of thumbnails. Works okay in Opera and
Chrome, but the top and bottom padding disappear in Firefox:



FWIW this does not happen in a float or inline-block layout.


The answer is here: https://drafts.csswg.org/css-flexbox/#item-margins

[quote] Percentage margins and paddings on flex items are always resolved
against their respective dimensions; unlike blocks, they do not always
resolve against the inline dimension of their containing block. [/quote]



Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply the
padding.



PS - don’t forget to add the -webkit- prefixed properties / values for
Safari.



Actually am applying this on top of inline-blocks via @supports ( flex-wrap:
wrap ) to prevent old Android versions using it. So Safari is locked out anyway.

BTW inline-blocks work perfectly if you minimize the HTML - no gaps. :)

Thank you, too, for the many insights you have given me with your generous
contributions to this list. Much appreciated.

--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/