5 ms·

In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to

In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't involved in the long proceedings that led up to the spec being written. You try to remember which one is justify-content, which one is align-items, and so forth, and just give up and try everything until something seems to work.

cynicalpeace 2y ago
justify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.
- bobbylarrybobby 2y ago
  Is this something to understand or memorize?
  - cynicalpeace 2y ago
    Yes- justify-content: center will center items along the flex direction. For example, if your flex-direction is "row" then it will center your items in the middle of the row horizontally. align-items: center will center your items in the middle of the row vertically. For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column
- itake 2y ago
  I have issues with "row" vs "column" If you choose "row", I see 1 row and 5 columns. So if I want more columns, I need to choose "row". If you choose "column", I see 5 rows and 1 column. So if I want more rows, I need to choose "column". When the content is wrapped, the setting is more intuitive, but most of the time, you don't want to use the wrap feature.
  - deleted 2y ago
    [deleted]
  - phist_mcgee 2y ago
    I've deeply internalised that with flexbox, when using rows or columns that I need to visualise a row that holds multiple columns. And for a column, it's got multiple rows inside it. I literally have to visualise this in my head to remember the correct property.
- deleted 2y ago
  [deleted]
dieselgate 2y ago
There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway Just my $.02
- frob 2y ago
  I've gone back to https://cssgridgarden.com/ https://cssgridgarden.com/ multiple times. It's https://flexboxfroggy.com/ https://flexboxfroggy.com/ but for grids.
- dylan604 2y ago
  1fr wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
  - mixmastamyk 2y ago
    Fraction. As in 1/n.
    - dylan604 2y ago
      right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"
      - sosborn 2y ago
        https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit#mixed-units https://www.digitalocean.com/community/tutorials/css-css-gri...
      - recursive 2y ago
        > second field stretching If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy https://codepen.io/tomtheisen/pen/emOeqPy grid-template-columns: 10em 1fr;
holoduke 2y ago
In almost every framework there is confusion about if a property is applied on itself or its children. Always the same thing.
nox101 2y ago
My issue with flexbox is that I can't seem to memorize all the settings I need to get boxes within boxes and content to either fill a box or the box to surround the content. This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eventually I get it. I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.
- nicoburns 2y ago
  It's mostly: - "flex: 1 1 0px" for fill available space - "flex: 0 0 auto" for sizes to content And then arguably every flexbox item ought to have min-width (and/or min-height) set to 0 because flexbox has a "min content sized" automatic minimum size built-in, which is rarely what you want. But if the content isn't overflowing or can be compressed in some way then you can get away without this.
yojo 2y ago
It is impressive that Tailwind succeeded in making this even more confusing. justify-content: center -> justify-center align-items: center -> items-center Just… why?
- umvi 2y ago
  There's a reason "naming things" is one of the great hard problems of programming. Especially when you have to name hundreds of things while developing i.e. a framework. Unless it's a solo pedantic developer creating the entire thing, inconsistencies will crop up, some names won't age well, some names don't quite capture the thing they are naming, etc.
bobbylarrybobby 2y ago
I have to visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally every time. There's a similar one for grid that's just as good.
paradox460 2y ago
One trick is if you open the chrome css inspector, you can click an icon next to the display: flex rule and see iconographic representation of the various flex box properties, and click them to set them. Every page essentially becomes a playground
cyberax 2y ago
Heh. I made a tool to translate <table>-based layouts to CSS just to try and memorize all the settings. I failed (to memorize them). I still use it from time to time. It's amazing how simple and intuitive the <table>-based layout is, that we still can't even get close to its usability.
65 2y ago
One thing I don't like about flexbox is that align-items and justify-content switch what they do depending on the flex-direction. justify-content: center; with flex-direction: row; makes the element horizontally centered. But justify-content: center with flex-direction: column; makes the element vertically centered.

cynicalpeace 2y ago

justify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.

bobbylarrybobby 2y ago
Is this something to understand or memorize?
- cynicalpeace 2y ago
  Yes- justify-content: center will center items along the flex direction. For example, if your flex-direction is "row" then it will center your items in the middle of the row horizontally. align-items: center will center your items in the middle of the row vertically. For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column
itake 2y ago
I have issues with "row" vs "column" If you choose "row", I see 1 row and 5 columns. So if I want more columns, I need to choose "row". If you choose "column", I see 5 rows and 1 column. So if I want more rows, I need to choose "column". When the content is wrapped, the setting is more intuitive, but most of the time, you don't want to use the wrap feature.
- deleted 2y ago
  [deleted]
- phist_mcgee 2y ago
  I've deeply internalised that with flexbox, when using rows or columns that I need to visualise a row that holds multiple columns. And for a column, it's got multiple rows inside it. I literally have to visualise this in my head to remember the correct property.
deleted 2y ago
[deleted]

dieselgate 2y ago

There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway Just my $.02

frob 2y ago
I've gone back to https://cssgridgarden.com/ https://cssgridgarden.com/ multiple times. It's https://flexboxfroggy.com/ https://flexboxfroggy.com/ but for grids.
dylan604 2y ago
1fr wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
- mixmastamyk 2y ago
  Fraction. As in 1/n.
  - dylan604 2y ago
    right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"
    - sosborn 2y ago
      https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit#mixed-units https://www.digitalocean.com/community/tutorials/css-css-gri...
    - recursive 2y ago
      > second field stretching If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy https://codepen.io/tomtheisen/pen/emOeqPy grid-template-columns: 10em 1fr;

holoduke 2y ago

In almost every framework there is confusion about if a property is applied on itself or its children. Always the same thing.

nox101 2y ago

My issue with flexbox is that I can't seem to memorize all the settings I need to get boxes within boxes and content to either fill a box or the box to surround the content. This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eventually I get it. I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.

nicoburns 2y ago
It's mostly: - "flex: 1 1 0px" for fill available space - "flex: 0 0 auto" for sizes to content And then arguably every flexbox item ought to have min-width (and/or min-height) set to 0 because flexbox has a "min content sized" automatic minimum size built-in, which is rarely what you want. But if the content isn't overflowing or can be compressed in some way then you can get away without this.

yojo 2y ago

It is impressive that Tailwind succeeded in making this even more confusing. justify-content: center -> justify-center align-items: center -> items-center Just… why?

umvi 2y ago
There's a reason "naming things" is one of the great hard problems of programming. Especially when you have to name hundreds of things while developing i.e. a framework. Unless it's a solo pedantic developer creating the entire thing, inconsistencies will crop up, some names won't age well, some names don't quite capture the thing they are naming, etc.

bobbylarrybobby 2y ago

I have to visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally every time. There's a similar one for grid that's just as good.

paradox460 2y ago

One trick is if you open the chrome css inspector, you can click an icon next to the display: flex rule and see iconographic representation of the various flex box properties, and click them to set them. Every page essentially becomes a playground

cyberax 2y ago

Heh. I made a tool to translate <table>-based layouts to CSS just to try and memorize all the settings. I failed (to memorize them). I still use it from time to time. It's amazing how simple and intuitive the <table>-based layout is, that we still can't even get close to its usability.

65 2y ago

One thing I don't like about flexbox is that align-items and justify-content switch what they do depending on the flex-direction. justify-content: center; with flex-direction: row; makes the element horizontally centered. But justify-content: center with flex-direction: column; makes the element vertically centered.