Flexbox is easy... if you can remember how to use it (builttoadapt.io)
almost 6 years ago from Elliot Dahl, Product Design Leader
almost 6 years ago from Elliot Dahl, Product Design Leader
I don't think people understand how flexbox is spposed to be used. I've been teaching Students in Beginner's HTML & CSS and there is nothing they picked up easier then flexbox. Experienced developers seem to have much bigger difficulties adapting these concepts.
You just have to understand one basic principle: A flexbox is laying out its direct children along two axis, the main and the cross axis. And there are two relevant properties to control the alignment along those axes: justify-content
along the main axis & align-items
along the cross axis. That is the most important part that most people fail to understand. Of course, also important, is to understand that your way of "sizing" columns does not have to end. You can still use the same width-caluclation that you used before, including the margin for your gap. Flexbox is for aligning items in a single row. How would a "nested flexbox style" even happen? The display
property does not cascade unless you specifically do that, which is not a good thing to do.
People are still trying to use the same process with a different technology. If you absolutely want to use span8 offset1 alpha pull-right
classes, sure. But maybe then a float based grid-system is better for your team. Or just use grid. Grid does not solve a larger layout problem, grid is for.. grid-based layout systems lol. Flexbox, again, is for laying out items in a single row.
If you need to align elements in a two dimensional system, just use grid. If you want to meet a developer that does not need to consult the css-tricks reference, then you have found at least me. I need to consult mdn for grid-properties, but it is more complex after all.
I think every tool has its value, your will be no different - but if you say things like "Using flexbox in a consistent way across a team(s) is difficult.", then I doubt this team you speak of fully understands how flexbox works - no tea no shade, I am not trying to attack you, please bare that in mind should you answer.
I recommend reading The New CSS Layout, or reading up on the recently updated MDN-Docs. Seriously, it is not complicated.
Hey I'm with you. You dropped some great knowledge up there . The solution I propose in the article is what worked for us working with teams of varying skill level across a global organization. There is definitely still room to iterate. Thanks for the links.
Nice work, Elliot!
I find that I get by pretty well with Tachyons' flex helper classes, but this looks like an awesome addition to my grid setup!
At this point I think I'm falling out of love with Flexbox, it's just float:left 2.0 for me in terms of "why won't this stupid div do what I want??!!" (with the exception of centering stuff, thankfully that just works fine).
I haven't really used CSS Grid much yet but I suspect 90% of what people want Flexbox to do is better suited to Grids.
I feel your pain. However, CSS Grid solves larger layout issues but you will still need flexbox for content organization. The solution in this article helps to reduce the cognitive overhead of flexbox. It's incredibly powerful but difficult to remember unless you're using it daily.
About the solution presented in the article more specifically, I guess I'm always wary of really thin abstraction layers, because you usually end up having to learn both the abstraction layer and (eventually) the underlying mechanism as well.
I'm sure you've spent more time thinking about all this than I have, but I'd probably recommend someone understand Flexbox/CSS Grid/both before they rely on a third-party abstraction (at which point they probably don't need the abstraction anymore).
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now