Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flexbox Adventures

chriswrightdesign.com

Post reply on HN
Print view View original

31–40 of 40 posts

Re: Flexbox Adventures

#31

Post by jonrimmer »

apaprocki wrote: post #23
jonrimmer wrote: post #19

Earlier quoted context omitted.

Depends on where you source your browser usage statistics, but IE9's share is smaller than IE8's. For example, caniuse.com[1] has IE8 on 3.18%, and IE9 on 2.13%. Later versions of IE (and Windows) are better at auto-updating, and people using them seem to be more willing to upgrade. I'm lucky enough to work for a company with a last-2-versions support policy for IE, meaning IE10 and 11 are all I have to worry about.…

In case you want a more "mainstream" sample, I see this on bloomberg.com: IE9 6.20%, IE8 4.09%, IE11 3.80%, IE10 3.12%, IE7 0.42%

To be clear, the caniuse.com stats are sourced from StatCounter Global Stats[1], not from the site itself, so they should be fairly reliable, albeit averaged across the world. Obviously, nothing beats measuring for your own site and audience.

[1] http://gs.statcounter.com/

Re: Flexbox Adventures

#32

Post by andrewingram »

Here's my favourite example of a layout that to the best of my knowledge, you can't solve with flexbox. I've only been able to solve it with JavaScript

A grid representation of a list, let's say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto.

What's so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let's say a square. I also want each item to be as close to a specific size as possible, but scaled up or down slightly to allow each row of items to exactly fit the width of the containing element. With the exception of the last row, which is allowed to be unfilled.

You can nearly do this with flexbox. The only problem is that the elements in the last row will be stretched to fill the row if it's short a few items. It's also fairly awkward ensuring the height of an element matches it's width, the current solution seems to be a hack involving padding-bottom.

I'm planning on trying out http://gridstylesheets.org/ to see if it's expressive enough for what I want. Of course, the catch is that I'm still depending on JavaScript.

Re: Flexbox Adventures

#34

Post by dunham »

andrewingram wrote: post #32

Here's my favourite example of a layout that to the best of my knowledge, you can't solve with flexbox. I've only been able to solve it with JavaScript A grid representation of a list, let's say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto. What's so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let's say a square…

Can you add at least one row worth of empty items? They'll spill into an extra row and get stretched, but you won't see them.

Re: Flexbox Adventures

#35

Post by mcot2 »

andrewingram wrote: post #32

Here's my favourite example of a layout that to the best of my knowledge, you can't solve with flexbox. I've only been able to solve it with JavaScript A grid representation of a list, let's say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto. What's so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let's say a square…

Is this possible with CSS grid layout? Flexbox and grid were supposed to be complementary but Flexbox seems to have a major head start on actual implementations.

Re: Flexbox Adventures

#36

Post by grumblestumble »

janfoeh wrote: post #12
melling wrote: post #10

Earlier quoted context omitted.

Yes, but are you willing to forgo IE8, IE9, and IE10 support? http://www.netmarketshare.com/browser-market-share.aspx?qpri... Let's hope Windows 10 is a huge hit.

If you're willing to include vendor prefixes and all three syntaxes, you can get considerably better support, including IE10: http://css-tricks.com/using-flexbox/

IE10 uses a substantially different interim spec syntax that is conceptually different in a couple of key ways.

Re: Flexbox Adventures

#37

Post by billsossoon »

tomphoolery wrote: post #30
altano wrote: post #28

If flex hasn't completely changed how you write layout related CSS, and it isn't because of legacy browser support, you're missing out. I also recommend this guide which is very visual and helped me a lot: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

What's browser compatibility like on this? Do I need to install any polyfills to get this to work on older browsers (mostly older IEs)?

http://caniuse.com/#feat=flexbox

Internet Explorer, as usual, screws everything up. No support in IE8 and IE9, limited support in IE10.

Re: Flexbox Adventures

#38

Post by andrewingram »

dunham wrote: post #34
andrewingram wrote: post #32

Here's my favourite example of a layout that to the best of my knowledge, you can't solve with flexbox. I've only been able to solve it with JavaScript A grid representation of a list, let's say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto. What's so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let's say a square…

Can you add at least one row worth of empty items? They'll spill into an extra row and get stretched, but you won't see them.

That's a novel approach. The catch is that the number of items per row is fluid, so you'd have to overestimate on how many extra items you'd need, then you have the problem of not knowing how much overflow to hide for the parent container. Unless i'm misunderstanding your idea?

Re: Flexbox Adventures

#39

Post by jonrimmer »

grumblestumble wrote: post #36
janfoeh wrote: post #12

Earlier quoted context omitted.

If you're willing to include vendor prefixes and all three syntaxes, you can get considerably better support, including IE10: http://css-tricks.com/using-flexbox/

IE10 uses a substantially different interim spec syntax that is conceptually different in a couple of key ways.

If you run your CSS files through Autoprefixer[1], it's possible to use the latest syntax, and have it automatically converted to all necessary older ones.

[1] https://github.com/postcss/autoprefixer

Re: Flexbox Adventures

#40

Post by altano »

billsossoon wrote: post #37
tomphoolery wrote: post #30

Earlier quoted context omitted.

What's browser compatibility like on this? Do I need to install any polyfills to get this to work on older browsers (mostly older IEs)?

http://caniuse.com/#feat=flexbox Internet Explorer, as usual, screws everything up. No support in IE8 and IE9, limited support in IE10.

In practice, IE10 is totally fine. If you have to support IE9 and lower you shouldn't adopt flex box yet.
Post reply on HN