5 ms·

I love flex, it's made CSS so easy. One of the things that improved my flex usage was using Penpot to draw my designs before implementing them. They have align

I love flex, it's made CSS so easy. One of the things that improved my flex usage was using Penpot to draw my designs before implementing them. They have alignment properties for graphical elements that work like flex's justify-content and align-items properties so once you design a view in Penpot it becomes almost trivial to translate it into HTML/CSS using flex. It really changed my mindset from working with relative or absolute positioning, blocks, margins, padding, etc... to simply working with flex everywhere. And it's responsive automatically!

nicoburns 4y ago
Just wait until you try CSS Grid :) IMO it's even more intuitive than Flexbox, at least for any 2 dimensional layout.
- illumanaughty 4y ago
  Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I wouldn't call it more intuitive.
  - open-source-ux 4y ago
    Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid. The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only. Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.
    - wruza 4y ago
      Not sure, but grid seems to be not very framework-able. Bootstrap frees you from choosing geometry by traditional grid system where you just class-mark columns and that's it. CSS grid is a whole new ~sublanguage that you have to master.
  - code_biologist 4y ago
    For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout. Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout. Great 20min tutorial vid with examples and details on the above: https://www.youtube.com/watch?v=3elGSZSWTbM https://www.youtube.com/watch?v=3elGSZSWTbM
    - bobthepanda 4y ago
      Grid is also 2D capable whereas flex is supposed to be a one-axis situation. You can nest flex such that it acts in a 2D way but it’s a bit annoying
    - dwohnitmok 4y ago
      Are there any layout behaviors that are possible to achieve with flexbox but impossible with grid? Basically, setting aside inversion of control at the moment, does grid subsume flexbox? Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.
    - sodapopcan 4y ago
      That's good advice—I like it. Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.
    - alwillis 4y ago
      For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout. I guess I’m wondering why it’s any more complicated than: * Flexbox is for formatting in one dimension (or axis)—a row or a column. * Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid. In fact, you can use flexbox and grid in the same layout, each doing its thing.
- silverwind 4y ago
  Grid surely is more complex. For example: Units that appear nowhere else in CSS besides Grid, functions that are only used in Grid. It feels like a language inside a language.

nicoburns 4y ago

Just wait until you try CSS Grid :) IMO it's even more intuitive than Flexbox, at least for any 2 dimensional layout.

illumanaughty 4y ago
Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I wouldn't call it more intuitive.
- open-source-ux 4y ago
  Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid. The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only. Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.
  - wruza 4y ago
    Not sure, but grid seems to be not very framework-able. Bootstrap frees you from choosing geometry by traditional grid system where you just class-mark columns and that's it. CSS grid is a whole new ~sublanguage that you have to master.
- code_biologist 4y ago
  For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout. Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout. Great 20min tutorial vid with examples and details on the above: https://www.youtube.com/watch?v=3elGSZSWTbM https://www.youtube.com/watch?v=3elGSZSWTbM
  - bobthepanda 4y ago
    Grid is also 2D capable whereas flex is supposed to be a one-axis situation. You can nest flex such that it acts in a 2D way but it’s a bit annoying
  - dwohnitmok 4y ago
    Are there any layout behaviors that are possible to achieve with flexbox but impossible with grid? Basically, setting aside inversion of control at the moment, does grid subsume flexbox? Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.
  - sodapopcan 4y ago
    That's good advice—I like it. Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.
  - alwillis 4y ago
    For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout. I guess I’m wondering why it’s any more complicated than: * Flexbox is for formatting in one dimension (or axis)—a row or a column. * Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid. In fact, you can use flexbox and grid in the same layout, each doing its thing.
silverwind 4y ago
Grid surely is more complex. For example: Units that appear nowhere else in CSS besides Grid, functions that are only used in Grid. It feels like a language inside a language.