61–70 of 127 posts
Very impressive gallery of solutions, and nice to see the absence of CSS hacks in those solutions. One thing to help complete the story: could this page link to a flexbox polyfill for older browsers?
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…
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.
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 flexbox stupid syntax.
Now if we switch that to vertical layout
X
-
X
-
X
Now where is it gonna be with the current flexbox layout and using content-whatever align-items? I don't really know off the top of my head, because it doesn't make intuitive sense!
With horizontal/vertical I know it's in the top left corner. With flex-start, justify-content and align-items I don't know what the heck.
It's worth mentioning that the flexbox standard has gone through three major revisions, each with very different syntax. To extend the usefulness somewhat to older browsers it's possible to mix the different versions. See this article at CSS-Tricks for some examples https://css-tricks.com/using-flexbox/
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.
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 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 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 use margin: auto; What? Margins are for having space between elements, not for centering anything. But ok let's say it is for centering, which makes no sense, then you should be able to set the vertical margins to auto. Wait, you can't do that. WHAT!?!
It goes on to say if you have 2 paragraphs with top and bottom margins, that doesn't mean you have 2 paragraphs with top and bottom margins some of the time. Because 2 paragraphs, the top/bottom margins of the 2 paragraphs will collapse. WHAT?!?!?!?!
Yeah, flexbox is just another abysmal attempt, in the right direction mind you. I don't know who runs the show but I'd say a 3rd year comp-sci student in one year, can come up with a better layout engine (how it works, not performance, by copying auto-layout for instance) than what is currently in existence.
Earlier quoted context omitted.
My favorite misconception! CSS 2 does support vertical centering. Google "absolute centering". I had to implement the chapter and verse that explicitly describes vertical centering...
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'
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.
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…
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…
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.
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.
Earlier quoted context omitted.
My favorite misconception! CSS 2 does support vertical centering. Google "absolute centering". I had to implement the chapter and verse that explicitly describes vertical centering...
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'
I think "margin: auto" maybe should have been written "margin: center" to make it more obvious, but the feature is there.