6 ms·

Wow, all these "why is this still so hard" complaints feel so off-base to me! As the article says, Flexbox straightforwardly solves centering in every simple ca

by b450 3y ago

Wow, all these "why is this still so hard" complaints feel so off-base to me! As the article says, Flexbox straightforwardly solves centering in every simple case. When it doesn't solve it for you, you're doing something more complex than _just_ centering, so it's inappropriate to expect that the implementation will be dead simple.

vogtb 3y ago
This is super true. Whenever I find myself struggling w/ flexbox it helps to take a step back and solve it one step at a time. Working my way out-to-in, parent-to-child element, and it becomes so much easier. There's a skill to it, but it's basically just elastic algebra.
karaterobot 3y ago
Yep, there was a time when it was moderately difficult in certain cases, but it's been a solved problem for the last decade or so. You still hear people acting like centering DIVs in CSS is something like a cross between alchemy and rocket science, which is perhaps indicative that people don't follow CSS with the same attention as other parts of web development—yet they still feel comfortable making these statements!
agumonkey 3y ago
grid and flex were very nice semi malleable additions, they really lift the legwork and in the 10% of complex cases you can spend your brain time with joy
Someone1234 3y ago
Flexbox is what I always wanted CSS to be, but for a long time wasn't, until one day it was, and we could drop support for browsers without it. Feels almost end-game for CSS. There was a reason people loved Bootstrap's grid system so much, Flexbox does all that and more straight in your browser. Cannot over-express how much I love it.
- thr33 3y ago
  I too love flex but your comment is a bit off. bootstraps grid system is a fake grid modelled on flex. building layout grids with flex in general is definitely not endgame, its actually very tedious and unreliable. css grid however is perfect for this and represents one of the most underutilised powerhouses in the css kit
  - n_plus_1_acc 3y ago
    I remember when bootstraps cols were implemented using float.
  - mminer237 3y ago
    I haven't really found much use for CSS grid. It's fine if you're doing a strict grid, but it seems to have all the limitations of a literal table to me. You can't put two objects in one cell. It has no way to wrap. It just isn't responsive at all. You can't make a sidebar with grid. You basically have to just write multiple styles and switch between them with media queries. In practice, I find making a fake grid out of flex boxes much more usable. About the only thing grid does easier is letting you place a footer correctly. (Although you gotta make sure you count elements correctly because if you insert an extra element before your grid's footer, it will be rendered after.)
    - thr33 3y ago
      you can do everything you just mentioned with grid more reliably and by writing significantly less css than the flex method.
    - wruza 3y ago
      Grid also doesn’t break in media print. Neither does flex, but at least you can make a div of flexes, so that div breaks.
shadowgovt 3y ago
Having to use flexbox already feels like we're shooting a fly with an elephant gun, is the thing. Everyone expects it to be as simple as <div centered> and everyone is surprised it isn't. That's a pretty universal experience in web development.
- internetter 3y ago
  Do you want your div centered vertically? horizontally? both? Relative to what? the window? the container? These are just some of the common questions that are asked every time you need to centre something. A simple attribute cannot work.
  - mixmastamyk 3y ago
    It worked exactly that way with tables, attributes align and valign: https://www.geeksforgeeks.org/html-td-tag/ https://www.geeksforgeeks.org/html-td-tag/
    - JacobThreeThree 3y ago
      Tables only ever "worked" when compared to the poor implementation and browser support of the alternatives of its time. In today's web landscape using tables to center categorically fails to work in many scenarios that will work with flexbox.
      - mixmastamyk 3y ago
        They worked great and still do for the vast majority of use cases. The fact it took over two decades to surpass is not a compliment at all. Considering "internet time" (first identified in the 90s), it's a disgrace.
  - alpaca128 3y ago
    > Relative to what? the window? the container? I don't think I ever wanted things centered relative to anything other than the direct parent, no matter what that is. I am sure some cases need it differently, but I don't see why those should prevent intuitive defaults. > A simple attribute cannot work Can it not work at all or just if one insists on covering 100% of cases on the internet with a single comprehensive option? I'm not an expert in this so I'm not sure, but I've seen a lot of software center items automatically and it worked quite well because they didn't assume by default that I might push the boundaries of design to new heights at any moment.
parasti 3y ago
And on top of that, flexbox has been widely supported for over a decade! The comments here are a wild ride.
crazygringo 3y ago
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.
- thr33 3y ago
  justify/align and content/items have specific meanings and the 'intuitive' naming most people expect - horizontal, vertical - completely betrays the powerful elegance of the flex model. 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.
  - zerocrates 3y ago
    There's just always going to be confusion because both pairs are basically synonyms: justify and align; items and content (what's the content of a flex container? flex items). I buy the value in having them be main-axis and cross-axis properties rather than horizontal/vertical by name, but I don't know that I buy the justify/align distinction to represent that as being meaningful or memorable.

by b450 3y ago

vogtb 3y ago

This is super true. Whenever I find myself struggling w/ flexbox it helps to take a step back and solve it one step at a time. Working my way out-to-in, parent-to-child element, and it becomes so much easier. There's a skill to it, but it's basically just elastic algebra.

karaterobot 3y ago

Yep, there was a time when it was moderately difficult in certain cases, but it's been a solved problem for the last decade or so. You still hear people acting like centering DIVs in CSS is something like a cross between alchemy and rocket science, which is perhaps indicative that people don't follow CSS with the same attention as other parts of web development—yet they still feel comfortable making these statements!

agumonkey 3y ago

grid and flex were very nice semi malleable additions, they really lift the legwork and in the 10% of complex cases you can spend your brain time with joy

Someone1234 3y ago

Flexbox is what I always wanted CSS to be, but for a long time wasn't, until one day it was, and we could drop support for browsers without it. Feels almost end-game for CSS. There was a reason people loved Bootstrap's grid system so much, Flexbox does all that and more straight in your browser. Cannot over-express how much I love it.

thr33 3y ago
I too love flex but your comment is a bit off. bootstraps grid system is a fake grid modelled on flex. building layout grids with flex in general is definitely not endgame, its actually very tedious and unreliable. css grid however is perfect for this and represents one of the most underutilised powerhouses in the css kit
- n_plus_1_acc 3y ago
  I remember when bootstraps cols were implemented using float.
- mminer237 3y ago
  I haven't really found much use for CSS grid. It's fine if you're doing a strict grid, but it seems to have all the limitations of a literal table to me. You can't put two objects in one cell. It has no way to wrap. It just isn't responsive at all. You can't make a sidebar with grid. You basically have to just write multiple styles and switch between them with media queries. In practice, I find making a fake grid out of flex boxes much more usable. About the only thing grid does easier is letting you place a footer correctly. (Although you gotta make sure you count elements correctly because if you insert an extra element before your grid's footer, it will be rendered after.)
  - thr33 3y ago
    you can do everything you just mentioned with grid more reliably and by writing significantly less css than the flex method.
  - wruza 3y ago
    Grid also doesn’t break in media print. Neither does flex, but at least you can make a div of flexes, so that div breaks.

shadowgovt 3y ago

Having to use flexbox already feels like we're shooting a fly with an elephant gun, is the thing. Everyone expects it to be as simple as <div centered> and everyone is surprised it isn't. That's a pretty universal experience in web development.

internetter 3y ago
Do you want your div centered vertically? horizontally? both? Relative to what? the window? the container? These are just some of the common questions that are asked every time you need to centre something. A simple attribute cannot work.
- mixmastamyk 3y ago
  It worked exactly that way with tables, attributes align and valign: https://www.geeksforgeeks.org/html-td-tag/ https://www.geeksforgeeks.org/html-td-tag/
  - JacobThreeThree 3y ago
    Tables only ever "worked" when compared to the poor implementation and browser support of the alternatives of its time. In today's web landscape using tables to center categorically fails to work in many scenarios that will work with flexbox.
    - mixmastamyk 3y ago
      They worked great and still do for the vast majority of use cases. The fact it took over two decades to surpass is not a compliment at all. Considering "internet time" (first identified in the 90s), it's a disgrace.
- alpaca128 3y ago
  > Relative to what? the window? the container? I don't think I ever wanted things centered relative to anything other than the direct parent, no matter what that is. I am sure some cases need it differently, but I don't see why those should prevent intuitive defaults. > A simple attribute cannot work Can it not work at all or just if one insists on covering 100% of cases on the internet with a single comprehensive option? I'm not an expert in this so I'm not sure, but I've seen a lot of software center items automatically and it worked quite well because they didn't assume by default that I might push the boundaries of design to new heights at any moment.

parasti 3y ago

And on top of that, flexbox has been widely supported for over a decade! The comments here are a wild ride.

crazygringo 3y ago

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.

thr33 3y ago
justify/align and content/items have specific meanings and the 'intuitive' naming most people expect - horizontal, vertical - completely betrays the powerful elegance of the flex model. 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.
- zerocrates 3y ago
  There's just always going to be confusion because both pairs are basically synonyms: justify and align; items and content (what's the content of a flex container? flex items). I buy the value in having them be main-axis and cross-axis properties rather than horizontal/vertical by name, but I don't know that I buy the justify/align distinction to represent that as being meaningful or memorable.