• Thomas Michael SemmlerThomas Michael Semmler, almost 6 years ago

    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.

    6 points
    • Elliot Dahl, almost 6 years ago

      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.

      0 points
  • Matt RothenbergMatt Rothenberg, almost 6 years ago

    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!

    2 points
  • Sacha GreifSacha Greif, almost 6 years ago

    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.

    1 point
    • Elliot Dahl, almost 6 years ago

      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.

      0 points
      • Sacha GreifSacha Greif, almost 6 years ago

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

        1 point