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

81–90 of 127 posts

Re: Solved by Flexbox

#81

Post by Cushman »

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…

Would it be overly pedantic to point out that the syntax is CSS syntax? You seem to have an issue with vocabulary and semantics, not syntax.

Re: Solved by Flexbox

#82

Post by zodiakzz »

tangue wrote: post #62

Sadly, Flexbox kills the joy of commenting on the "How to center X in CSS" that periodically appears on HN

Sadly? Good riddance I say. There's so much textbook cynicism here.. the more we can get rid of the better!

Re: Solved by Flexbox

#83

Post by recuter »

Ygg2 wrote: post #20
woah wrote: post #13

Earlier quoted context omitted.

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 G…

There's no reason why constraint solving wouldn't work just as well in the browser as AutoLayout works on OSX/iOS if it was natively implemented.

It is not natively implemented however. Also, to take it further, Cassowary.js could solve for and output to flexbox as a backend.

Re: Solved by Flexbox

#84

Post by alexashka »

Cushman wrote: post #81
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…

Would it be overly pedantic to point out that the syntax is CSS syntax? You seem to have an issue with vocabulary and semantics, not syntax.

Good point, thank you :)

Re: Solved by Flexbox

#85

Post by alexashka »

pcwalton wrote: post #72
alexashka wrote: post #69

Earlier quoted context omitted.

I agree, when you're forced to eat at McDonalds, choose the shitty salad. Have you worked with auto-layout in xcode? If you did that and used flexbox and chose flexbox, I'd be flabbergasted. Given the choice between blocks, inline-blocks, floats and flexbox - I'm choosing flexbox 100% of the time. Doesn't mean it's not painful however, just that the other options are insane.

I prefer flexbox to auto layout in Xcode, actually. In fact, for Mac apps I've always turned off auto layout and gone back to springs and struts, since they're so much simpler...

Hehe that'll come to bite you ;)

I'd actually equate auto-layout when it was first introduced to the current state of flexbox. It can do what you want but boy are there some gotchas along the way.

It has gotten a lot better - the pain point with autolayout remains when when you need to add constraints in code - then it's a painful API. In UI, it is quite a pleasure to work with I find.

I wonder when that's coming to web dev - a GUI for web layout using flexbox would make a lot of people happy. The reason dreamweaver and the like didn't work well is because there were too many gotchas, do this in javascript, that in css, etc.

With flexbox, css selectors and some good plug'n'play javascript components (carousel, etc, everything bootstrap offers basicaly) - I can see a tool like Dreamweaver making a big comeback. What do you think?

Re: Solved by Flexbox

#86

Post by vukers »

pcwalton wrote: post #70
thekillingjoke wrote: post #55

Earlier quoted context omitted.

I think OP's point was that the trick to vertical centering involves wrapping a div as a table cell and then vertically aligning that. It should be much simpler, like 'text-align:center'

Use margin: auto and absolute positioning to center something vertically. No tables or special magic needed. I think "margin: auto" maybe should have been written "margin: center" to make it more obvious, but the feature is there.

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.

Re: Solved by Flexbox

#87

Post by pcwalton »

vukers wrote: post #86
pcwalton wrote: post #70

Earlier quoted context omitted.

Use margin: auto and absolute positioning to center something vertically. No tables or special magic needed. I think "margin: auto" maybe should have been written "margin: center" to make it more obvious, but the feature is there.

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.

Re: Solved by Flexbox

#88

Post by alexashka »

mbrock wrote: post #71
alexashka wrote: post #63

Earlier quoted context omitted.

I'm saying the syntax is terrible. The functionality is limited. Why is one 'content' and another 'items'? If you want horizontal and vertical alignment to switch places when you change directions, then you can have a flag that does that for you. For example I have X | X | X - a horizontal layout. I want it left-aligned horizontally and top-aligned vertically. (Top-left corner) and I make it work with the current fle…

If you took the time you've just spent calling flexbox "retarded" and used it to read the basic documentation of the properties you claim are impossibly unintuitive, you would know the answer to your question. Switching orientation is a basic requirement for the whole idea of flexible boxes in CSS. From MDN [0]: > The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-b…

Ok so given the example, you have a media query for a smaller screen and you switch the direction to be column.

Would it really present a problem to add 2 more lines of code to change hor-align and ver-align to be different if need be?

In the example, they don't even use justify-content and align-items frankly.

The trade-off seems to be that you define a flexbox and let's say define the elements to be spaced out evenly horizontally on the page and when you flip it to be a vertical layout - now they are spaced out evenly vertically.

Except you probably don't want that, so you're going to be redefining these justify-content and align-items based on row/column directions anyway so what are you winning by having it confusing and direction-agnostic?

In the real world, we scroll vertically and read horizontally in most cultures, so WE are not direction agnostic. Why flexbox is, is beyond me.

Granted, I haven't extensively used it - it could be that there's hidden powers that add complexity that I am not appreciating at this time.

Re: Solved by Flexbox

#89

Post by karlshea »

ckluis wrote: post #77
lazyant wrote: post #27

Sorry for my laziness, how does this compare to Bootstrap?

Honestly a Bootstrap / Semantic UI style system that implemented Flexbox would probably be the best thing for making Flexbox more popular.

Older browsers dying so we can actually use Flexbox on sites that have to work back a couple versions will probably help even more.

Re: Solved by Flexbox

#90

Post by sosuke »

monsterix wrote: post #43
philipwalton wrote: post #18

Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.

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?
Post reply on HN