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

111–120 of 127 posts

Re: Solved by Flexbox

#113

Post by krick »

alexashka wrote: post #44

Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this? row/column - use horizontal/vertical or hor/ver for short. justify-content and align-items mean different things depending on whether you're using row or column - what? why not just have hor-a…

Exactly. Damn thing applies to a whole CSS, but you would think that in the year 2015, when all that "web was flawed at embryonic stage of development, but it's kinda hard to fix it, when you noticed 20 years later, when it's grown into a huge monster" thing became sort of legendary, they would be more thoughtful of designing APIs.

But it seems that w3c has something in common with war: it never changes.

Re: Solved by Flexbox

#114

Post by marvy »

pcwalton wrote: post #98
ConfuciusSay wrote: post #96

Earlier quoted context omitted.

The point remains that centering vertically with absolute positioning does not work with an element of variable height. Meanwhile, horizontally centering something of variable width is dead simple. Why the difference? It's a shortcoming of CSS.

There is a fundamental reason for the difference: in standard CSS block/inline layout, widths depend on parent widths, but heights depend on child heights. Far from being stupid, this difference is the entire reason CSS is parallelizable at all. Flexbox makes this simpler by switching to an entirely different model, which is the right approach for UIs (as opposed to documents). But I can't really fault CSS 2.1 for no…

Are UIs and documents so different?

Re: Solved by Flexbox

#115

Post by lisowski »

This is awesome! I've been building an app with a grid that scrolls horizontally and this is the best solution! Getting this pattern in html is really hard:

      1 4 7 10
      2 5 8 11
      3 6 9 12
Other than than columns, which dont respond the screen size that well, this is the only good option. Thanks for educating me!

Re: Solved by Flexbox

#116

Post by Touche »

pcwalton wrote: post #87
vukers wrote: post #86

Earlier quoted context omitted.

Absolute centering only works when the element you are trying to center has a defined height. If you are trying to center an element with unknown height inside a container with unknown height, the table-cell is likely the front-runner, sadly.

I like the translateY(-50%) trick. But yeah, it is a pain point. Hence flexbox.

People always suggest margin auto but at least for me having defined heights for elements is the very rare exception.

Re: Solved by Flexbox

#117

Post by philipwalton »

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

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

Re: Solved by Flexbox

#119

Post by tenken »

sosuke wrote: post #90
monsterix wrote: post #43

Earlier quoted context omitted.

Have you also tested it inside of an iframe? As far as I know support on Safari wasn't quite there yet. Last when I checked, and that was almost two months ago, Flex broke down pretty badly on iOS Safari, both on iPad and iPhone. Guess I need to revisit this probably. Thanks for the great piece of work!

So unfortunate that we still can't just use flexbox without hacks. Do you know of any methods of 'fixing' Safari?

So use a tool like Autoprefixer or SAS and re-roll your CSS occassionaly as compatibility improves.

Re: Solved by Flexbox

#120

Post by evolve2k »

alexashka wrote: post #66
Bahamut wrote: post #50

Earlier quoted context omitted.

I disagree with row/column vs. hor/ver - the web mostly operates on thinking in terms of rows and columns. Otherwise, I do agree there is some confusion with the flexbox syntax and understanding it. I have found http://css-tricks.com/snippets/css/a-guide-to-flexbox/ immensely useful.

I didn't find it helpful - confusing, yes. I found the spec better, which I thought there'd never come a day I'd say but yes - the flexbox spec is the best resource for understanding flexbox. Wow. I know. I think I'm just ranting on the html layout rules in general, for instance: https://css-tricks.com/almanac/properties/m/margin/ This points out like 3 things that make NO SENSE. To center something horizontally, you…

> The flexbox spec is the best resource for understanding flexbox.

Link to the Flexbox spec for anyone interested:

http://www.w3.org/TR/css3-flexbox/

Post reply on HN