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

91–100 of 127 posts

Re: Solved by Flexbox

#91

Post by mbrock »

alexashka wrote: post #88
mbrock wrote: post #71

Earlier quoted context omitted.

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

The model of flexbox is that items are layed out along an axis, and justified/aligned along the axis and the cross axis. The axis can be vertical or horizontal. This is not an immensely complex model, and in fact makes a lot of sense.

As for doing alignment with explicit horizontal/vertical specifications versus based on an axis direction, I can see advantages and disadvantages of both, but no pressing reason to prefer one over the other. I don't know what the discussions about this were like, or what compromises are involved.

In my opinion, your finding the names of these two properties somewhat hard to remember doesn't discredit the whole layout model as much as you seem to think!

Me, I'm just glad to have a better way to do layout. I switched our basic layout (a full-viewport web app, similar to the "holy grail" layout) from absolute positioning to flexbox earlier this week. It's been quite pleasant to work with, and I can see it saving quite a bit of time in the future.

Re: Solved by Flexbox

#92

Post by freshyill »

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!

Safari works fine. It just still needs vendor prefixes.

Re: Solved by Flexbox

#93

Post by wernercd »

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?

Replace it with Chrome ba dum ding

Re: Solved by Flexbox

#94

Post by panic »

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…

Autolayout is very slow compared to manual layout on iOS. It limits the complexity of the UI you can build, especially if you need to update the layout at the display's refresh rate.

Re: Solved by Flexbox

#95

Post by Conlectus »

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.

Didn't seem to work that well for the "Pure CSS" library that Yahoo made, which uses Flexbox.

Re: Solved by Flexbox

#96

Post by ConfuciusSay »

xorcist wrote: post #67
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'

Why would you want to do that? That sounds absolutely horrific. Just center the div in absolute mode. You need to have it wrapped in something though, to have something to center against, but you shouldn't have tables in there unless you want them.

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.

Re: Solved by Flexbox

#97

Post by Conlectus »

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…

I'd argue that creating an element that has size dependant on the size of something somewhere completely different is not something you should be doing anyway.

As others have mentioned, being able to switch the orientation of the principle axis is very helpful, for example when going from a row to a column on mobile. Because all positioning is defined based on the principle axis, all the styles translate correctly, and you don't have to override 4+ different rules.

> How do I box 1 height stretch? Hm... I don't intuitive know.

If you understand how align-items aligns everything else along the secondary axis, then "align-self: stretch" seems pretty intuitive (http://codepen.io/conlectus/pen/WvGLvy).

> re: 1em margin breaking alignment

I'm not sure what you're referencing here, as it seems to not do that http://codepen.io/conlectus/pen/WvGLrK

A guess would be that you don't have box-sizing: border-box on all elements set.

Adding "flex" always makes the element take up as much space as it can, and the number specifies how much "force" it applies compared to other elements.

Re: Solved by Flexbox

#98

Post by pcwalton »

ConfuciusSay wrote: post #96
xorcist wrote: post #67

Earlier quoted context omitted.

Why would you want to do that? That sounds absolutely horrific. Just center the div in absolute mode. You need to have it wrapped in something though, to have something to center against, but you shouldn't have tables in there unless you want them.

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 not introducing flexbox right away, because CSS 2.1 is complex enough as it is.

Re: Solved by Flexbox

#100

Post by randunel »

jcoffland wrote: post #75

Flexbox is great. Now we just need to wait a couple of years for 99% of the active browsers to be upgraded. I know there are shims but I cannot imagine they don't come with caveats. Web development has come a long way but it's a slow process. Remember when we had to support IE6. (shudder) Now most people are ditching IE8 but 9 is still common.

Saw a post on stackoverflow the other day where the OP justified in comments that their client had 7% IE7 users.

Browsers are getting upgraded in general, but you still get government-x and company-y asking for IE7 support.

Post reply on HN