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

71–80 of 127 posts

Re: Solved by Flexbox

#71

Post by mbrock »

alexashka wrote: post #63
pcwalton wrote: post #52

Earlier quoted context omitted.

The fact that justify-content and align-items changes based on horizontal or vertical is useful for many reasons: toolbars that can become vertical or horizontal per user customization, or vertical writing-direction, for example.

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-biased, or the inline layout, which is horizontally-biased. While the block layout works well for pages, it lacks sufficient definition to support application components that have to change orientation, resize, stretch, or shrink as the user agent changes, flips from vertical to horizontal, and so forth.

[0]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...

Re: Solved by Flexbox

#72

Post by pcwalton »

alexashka wrote: post #69
sondr3 wrote: post #68

Earlier quoted context omitted.

It makes sense after you've worked with it for a little bit, I had the same confusion when I first started using it but after a while it started making sense and by now I absolutely cannot see myself go back to anything else, it's just so pleasant to write in.

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...

Re: Solved by Flexbox

#73

Post by pcwalton »

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…

Interestingly enough, even that is out of date with respect to block and inline layout--CSS3 writing modes make block and inline layout direction-agnostic as well.

Re: Solved by Flexbox

#74

Post by dak1 »

metasean wrote: post #57
amelius wrote: post #45

I certainly wonder what has gone wrong at W3C that resulted in the situation that the world's leading layout language didn't support proper vertical centering for several years (to give an example). How could this possibly happen?

http://howtocenterincss.com/

I think the need for an entire domain to explain to people tricks to make it work rather supports the original point.

Re: Solved by Flexbox

#75

Post by jcoffland »

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.

Re: Solved by Flexbox

#76

Post by [deleted] »

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…

[deleted]

Re: Solved by Flexbox

#77

Post by ckluis »

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.

Re: Solved by Flexbox

#78

Post by pcwalton »

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…

You can do vertical centering with margin:auto. Just absolutely position.

And margin collapse was a bad idea, I agree. But HTML had it, before CSS. If anyone is to blame for margin collapse, it's NCSA Mosaic. CSS just needed to describe what already existed.

Re: Solved by Flexbox

#79

Post by RobertKerans »

BlackDeath3 wrote: post #58
jsalinas wrote: post #29

Earlier quoted context omitted.

Bootstrap is a CSS framework and the flexbox layout is a CSS module, so you can't really compare them.

Do they not provide comparable functionality?

It's analogous to asking if jQuery provides comparable functionality to JavaScript ES5 enumerables. It does, it's just a strange comparison given that the former is a library built on top of the latter language, using a different API due to the former predating the spec

Re: Solved by Flexbox

#80

Post by [deleted] »

alexashka wrote: post #63
pcwalton wrote: post #52

Earlier quoted context omitted.

The fact that justify-content and align-items changes based on horizontal or vertical is useful for many reasons: toolbars that can become vertical or horizontal per user customization, or vertical writing-direction, for example.

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…

[deleted]
Post reply on HN