Hacker News Reader

Comment by Already__Taken | Hacker News Reader

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

View on HN

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

Luckily, this is built into the flexbox model too. By default flexbox uses an element's automatic size as the basis to calculate its new size from.

However if you set flex-basis to zero then it will treat the element as if it was zero width for the purposes of calculating its new size from.

So if all elements have a zero basis then the flex ratio will be the only thing affecting their final width:

http://codepen.io/anon/pen/WvGLML?editors=110

When you use gutters sometimes the math doesn't work out quite right. http://codepen.io/anon/pen/xGEMYY

Reply on news.ycombinator.com