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

Solved by Flexbox

philipwalton.github.io

Post reply on HN
Print view View original

11–20 of 127 posts

Re: Solved by Flexbox

#11

Post by charliepark »

Already__Taken wrote: post #9

Just started a test project using flexbox and I'm finding myself using it constantly. In the "individual grid sample" why have you chose to make a 2/3rds and 1/3rd column with divs respectively flex:1; width:33.3333333% instead of leveraging the ratio flex:2; flex:1

I'm not sure I'm looking at the example you're looking at, but generally: a Flexbox layout will defer to the content, where when you're laying out on a grid, you want the content to defer to the grid. By giving an explicit width, you tell the browser that, in this case, the specified width is what's most important for the layout.

Re: Solved by Flexbox

#12

Post by scotu »

kagamine wrote: post #7
Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

As another user says, no js. Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the ne…

I'd like to read more about flexbox, any link you'd recommend? Especially backwards compatibility and the cross browser/mobile you are mentioning are something I'm interested in. Thanks

Re: Solved by Flexbox

#13

Post by woah »

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

Here is some extensive discussion on that very issue: https://twitter.com/nikitonsky/status/561941079038390273?__h...

Basically, constraint solving is harder to understanding, doesn't support wrapping, and is slow.

Re: Solved by Flexbox

#14

Post by Already__Taken »

charliepark wrote: post #11
Already__Taken wrote: post #9

Just started a test project using flexbox and I'm finding myself using it constantly. In the "individual grid sample" why have you chose to make a 2/3rds and 1/3rd column with divs respectively flex:1; width:33.3333333% instead of leveraging the ratio flex:2; flex:1

I'm not sure I'm looking at the example you're looking at, but generally: a Flexbox layout will defer to the content , where when you're laying out on a grid, you want the content to defer to the grid . By giving an explicit width, you tell the browser that, in this case, the specified width is what's most important for the layout.

I see, That makes sense thankyou

Re: Solved by Flexbox

#15

Post by yoran »

After re-assessing our analytics a couple of weeks ago, we decided it was safe to drop support for IE9 and below. Since then, we found ourselves using more and more Flexbox for layout. Just a simple thing like vertical centering becomes much easier with Flexbox. The sticky footer technique from the website (https://philipwalton.github.io/solved-by-flexbox/demos/stick...) is also something that we use on the Hstry application.

Re: Solved by Flexbox

#19

Post by phaer »

scotu wrote: post #12
kagamine wrote: post #7

Earlier quoted context omitted.

As another user says, no js. Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the ne…

I'd like to read more about flexbox, any link you'd recommend? Especially backwards compatibility and the cross browser/mobile you are mentioning are something I'm interested in. Thanks

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

Re: Solved by Flexbox

#20

Post by Ygg2 »

woah wrote: post #13
Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

Here is some extensive discussion on that very issue: https://twitter.com/nikitonsky/status/561941079038390273?__h... Basically, constraint solving is harder to understanding, doesn't support wrapping, and is slow.

This is the kind of response I was looking for. Though I have to ask, is this specific to Cassowary.js or to Cassowary constraint solver in general?

Because from what I've seen/heard, the Cassowary constraint solver is used extensively in Mac OS X/iOS for UI layout, which AFAIK isn't really referred to as slow.

Plus the constraint solver does operate on a matrix of constraint, which should make it easier to work on GPU.

Post reply on HN