|
It's because for those of us who have been around a while, it was hard before flexbox, then it continued to be hard when flexbox didn't have 100% support and we kept having to track browser usage and deciding whether we could use flexbox or not, and now there are just so many ways to do it that it's an overwhelming amount of complexity. You're often not building something from scratch but rather updating old code, and having to figure out why the CSS was done in one particular way for what reason, and what might break in which edge cases, and whether you should/can update it or not, and which one of several solutions when it's not simple. If you look through the article, none of it is intuitive. Even with flexbox, the horizontal setting is called "justify-content" while the vertical is "align-items". I personally simply can't remember what a lot of CSS properties are called anymore -- there are so many now, and the names are so arbitrary. (Even hyphens are maddening -- why is it "white-space: nowrap" instead of "whitespace: no-wrap"?) At the end of the day, there's a big difference between: 1) Simple, intuitive, reliable building blocks that let you build complex solutions out of simple parts 2) Convoluted, partially-overlapping, constantly-needing-to-Google building blocks that let you build complex solutions out of complex sets of parts A language like Go or Python is #1. A language like CSS is #2. |
justify always refers to the main axis of a box model element, and align refers to the cross axis. by default, flex-direction is set to row, so justify often means horizontal and align often means vertical.
until it doesn't of course. when we switch tbe flex direction from row to column which is a very handy trick for easy responsive on small devices, the main axis is now vertical and the cross axis is now horizontal.