Flexbox seems to serve most HTML layouts. Are there any that it doesn't work so well for? What about CSS Grid Layout? I've not heard anything about that for a while. Does that have any advantages over Flexbox?
Solved by Flexbox
41–50 of 127 posts
Re: Solved by Flexbox
#42Flexbox seems to serve most HTML layouts. Are there any that it doesn't work so well for? What about CSS Grid Layout? I've not heard anything about that for a while. Does that have any advantages over Flexbox?
It seems the CSS Grid Layout needs far less divs to accomplish the same layout. With Flexbox you end up creating a lot of parent elements to layout the content elements correctly. With CSS Grid Layout you can express the layout more precisely in the CSS, so there is no need for a lot parent elements.
Re: Solved by Flexbox
#43Solved 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!
Re: Solved by Flexbox
#44Solved 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-align, ver-align?
Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this?
Here's my pseudo-code:
body ver nowrap, hor-align center.
add 2 flex boxes ver nowrap.
box 1 height stretch, hor-align left, ver-align center.
box 2 height fit-content, hor-align left, ver-align center.
add 3 paragraphs to box 1.
add 1 paragraph to box 2.
In reality, it is: body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess.
How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax.
And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?!
Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout.
Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox?
Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.
Re: Solved by Flexbox
#45I 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?
Re: Solved by Flexbox
#46spacer.gif
a down vote for "spacer.gif"? kids these days, just don't remember
Re: Solved by Flexbox
#47Very 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?
Re: Solved by Flexbox
#48Earlier quoted context omitted.
Can you elaborate on this? What rendering glitches did you encounter?
There's one right now where a combination of flex and transform3d will cause things to simply disappear in Chrome and Safari but I haven't searched for any issues reported on that. The problem is progressively getting worse, so I'm almost sure you'll encounter it if you play around with those properties. I'm unfortunately not in a position to elaborate much further in this exact moment - but if this only happens to m…
I think I actually had a similar problem, but using `filter`. Don't really remember though.
Re: Solved by Flexbox
#49Flexbox seems to serve most HTML layouts. Are there any that it doesn't work so well for? What about CSS Grid Layout? I've not heard anything about that for a while. Does that have any advantages over Flexbox?
It seems the CSS Grid Layout needs far less divs to accomplish the same layout. With Flexbox you end up creating a lot of parent elements to layout the content elements correctly. With CSS Grid Layout you can express the layout more precisely in the CSS, so there is no need for a lot parent elements.
I have lots of examples of grid layout over at http://gridbyexample.com (you need Chrome with Experimental Web Platform features flag on to view them)
Re: Solved by Flexbox
#50Solved 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.