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

101–110 of 127 posts

Re: Solved by Flexbox

#101

Post by alexashka »

mbrock wrote: post #91
alexashka wrote: post #88

Earlier quoted context omitted.

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

I'm with you, flexbox is definitely a step in the right direction.

It's not so much the naming as it is just wrapping your head around these things. The flexbox spec for instance uses margin-left: auto; on one of the children elements of a flexbox to align the element to the right!!! edge.

What in the world...

Here's the link: http://www.w3.org/TR/css3-flexbox/#auto-margins

That can't be right, and yet it's in the spec.

What happens when you want the elements on the left to be centered but have one element on the very right? Oh that's right, that whole example no longer works.

It's these hacky solutions that ultimately drive me crazy. Look at sticky-footer: https://philipwalton.github.io/solved-by-flexbox/demos/stick...

The footer is not at the bottom of the page if you copy-paste his code. What in the world...

You have to run around until you come upon needing: html, body { width: 100%; height: 100%; margin: 0; }

for the footer to actually be on the bottom of the page like a footer should be. What on earth is the value of width and height by default if not 100% btw? Lol...

I don't even remember how I came upon that but it's not in solved by flexbox and not on the mozilla site. Which makes me think wow, have these guys even written a layout with a proper footer and a content area that doesn't have a hard-coded height?

That's what mozilla has, a hard-coded height in their fkn example of using flexbox. So when you try to change it to be stretchy, nothing works because you need the line above. Joke...

Anyhoo it's Friday, I need a drink :) Sorry for the attitude.

Re: Solved by Flexbox

#102

Post by garethadams »

charliepark wrote: post #11
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

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.

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

Re: Solved by Flexbox

#103

Post by woah »

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…

What is horizontal and vertical? Why should they be absolutely defined?

Re: Solved by Flexbox

#104

Post by woah »

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…

I agree that the syntax isn't great. But you'll memorize it after a few times. The semantics however are pretty good.

Re: Solved by Flexbox

#105

Post by woah »

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.

Auto layout is fiddly and annoying. You have to specify at least 3 or 4 constraints per element, often more. It also has no concept of flow, which in my book makes it essentially useless for many applications.

Re: Solved by Flexbox

#106

Post by orthecreedence »

I'm actually kind of pissed that flexbox solved everything but horizontal masonry layouts. This layout has been javascript-bolstered for years now and it sucks there's no pure-html solution. You can do google-images-style layouts (right-to-left, fixed height, variable width) but pinterest-style (right-to-left, variable height, fixed width) is impossible and requires (slow) javascript.

If I'm wrong, I'll gladly take 100 downvotes in exchange for a link to a resource that has flexbox-driven horizontal masonry instructions.

Re: Solved by Flexbox

#107

Post by Nadya »

orthecreedence wrote: post #106

I'm actually kind of pissed that flexbox solved everything but horizontal masonry layouts. This layout has been javascript-bolstered for years now and it sucks there's no pure-html solution. You can do google-images-style layouts (right-to-left, fixed height, variable width) but pinterest-style (right-to-left, variable height, fixed width) is impossible and requires (slow) javascript. If I'm wrong, I'll gladly take 1…

Something like this?

http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Fl...

Re: Solved by Flexbox

#108

Post by orthecreedence »

Nadya wrote: post #107
orthecreedence wrote: post #106

I'm actually kind of pissed that flexbox solved everything but horizontal masonry layouts. This layout has been javascript-bolstered for years now and it sucks there's no pure-html solution. You can do google-images-style layouts (right-to-left, fixed height, variable width) but pinterest-style (right-to-left, variable height, fixed width) is impossible and requires (slow) javascript. If I'm wrong, I'll gladly take 1…

Something like this? http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Fl...

That is a vertical layout. It goes top to bottom, not left to right:

    1 4 7
    2 5 8
    3 6 9
So, no, that doesn't solve the problem.

Re: Solved by Flexbox

#109

Post by Nadya »

orthecreedence wrote: post #108
Nadya wrote: post #107

Earlier quoted context omitted.

Something like this? http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Fl...

That is a vertical layout. It goes top to bottom, not left to right: 1 4 7 2 5 8 3 6 9 So, no, that doesn't solve the problem.

Ah, my bad! I was a bit focused on "Pinterest style" and shared the first thing that came to mind.

Re: Solved by Flexbox

#110

Post by orthecreedence »

Nadya wrote: post #109
orthecreedence wrote: post #108

Earlier quoted context omitted.

That is a vertical layout. It goes top to bottom, not left to right: 1 4 7 2 5 8 3 6 9 So, no, that doesn't solve the problem.

Ah, my bad! I was a bit focused on "Pinterest style" and shared the first thing that came to mind.

No problem. I saw that post a few months back and thought "wow, finally!!" but once I implemented it I realized it wouldn't work. Unfortunately going from vertical to horizontal requires fixed height flex elements.
Post reply on HN