As someone who only needs to use Flexbox/Grid every once in a while, this is precisely what I needed.

I've been struggling with static documentation like the one from Tailwind [1] or MDN [2]. Writing good and intuitive documentation is hard, surely this must have been quite an effort.

[1]: https://tailwindcss.com/docs/flex-direction

[2]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

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!

This is a beautiful, immensely valuable resource - straight into my bookmarked notes. Thank you!

Perfect timing. I'm working with tailwindcss, not by choice. And all good tailwind templates, buttons, styles are for purchase. I guess that is why I gravitate towards boostrap when I can.

But this site is helping a lot. Thank you.

Nice work on the interactive elements in this guide, they're delightful!

Try grid too - unless you need flexing, it's simpler than flexbox, even for single columns or rows.

I use CSS basically every day but flex-basis, flex-grow and flex-shrink now clear. I had a gut feeling but no motivation to investigate further. If something doesn't work with flexbox I just use grid. Now Flexbox gets maybe some more use cases where grid is bit of an overkill.

I created https://www.flexulator.com for a deeper look into how the spacing algorithm works, you can see how the values are calculated.

I noticed a lot of developers rave about flexbox, but not so much about grid.

It is my understanding that flexbox was intended for 1D layouts and grid was intended for 2D layouts. We've been using grid for the overall page layout and flex inside certain regions.

Is there something I am missing here, or are we finding that the hammer is pretty good at screws too?

Amazing guide, thanks!

"I like to think of CSS as a collection of layout modes. Each layout mode is an algorithm that can implement or redefine each CSS property. We provide an algorithm with our CSS declarations (key/value pairs), and the algorithm decides how to use them."

Brilliant. The way basic CSS properties are taught often ignores the layout mode. Even MDN does not mention that "width" is a CSS property that is not always respected when "display: flex". Making this distinction more prominent would reduce the amount of confusion/frustration when certain CSS properties appear to "not work".

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/width

This is really good, the language, the examples, just everything. It's right up my alley.

I wonder if the most use cases today could justify flex as a default where `display:block` is a default and s/inline-block/inline-flex/ .. I often have an anxiety of using too many flex elements. How many cases where there's a need to un-flex?

Is there a way to remember what justify/align-content/items do on a column or row? I write css semi-rarely and go through all options in dev tools until it’s the one I want..

As someone who does more back-end work in my job, I love learning about this kind of front-end stuff that I don't get to use as often.

Flexbox has been great to work with because it's much easier to control your responsive design. You can choose what lengths stay fixed, which expand and shrink, etc.

When I learned how to use flexbox I went searching for how to add tools to my responsive-design toolbox. I learned about how to use media queries so that different CSS rules are applied based on the width of the page.

Flexbox, grid, and media queries are some of the heavy hitters in responsive design these days, but wanted to know more about effective use of things like CSS functions like calc, min, max, clamp, minmax (grid only) and when to use them. I can find reference material, but I haven't found any good resources that explain when you'd use them instead of something else.

Does anyone have a good resource for responsive design that covers use of CSS functions too? It's no good to have a tool in your toolbox if you don't know you should be using it.

To make complete layouts, you still need to creatively combine (nested) Flexbox with other CSS features. Flexbox was a huge improvement, but I continue to see the need for "tricks" articles that give you well thought-out solutions to practical layout cases.

That reminds me again that flexbox is so needlessly complex that you need quite non-trivial guides each time you use it.

It could be significantly simpler and, well, flexible:

https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...

Easily one of the best guides of flexbox, and this is coming from a mostly backend guy that can never remember flexbox for long term, and always needs a refresh about it.

It seems like in the example widgets baseline and flex-start appear the same. But according to https://stackoverflow.com/questions/34606879/whats-the-diffe... they do different things. Josh's examples have text in them, so why is it not aligning to the baseline of that text?

Windows 11/Latest Chrome FWIW :-)

Old guy here. I can remember fighting with and complaining about horizontal scroll bars on wide html pages. I didn't realize how good I had it. Now I fight with browser based UI's that rearrange themselves to fit in whatever width the browser is set to. Sounds good. Oh, that nav-bar on the left side doesn't fit? No problem. Now it appears as a set of sub-tabs arranged horizontally. The app knows where things are, but I don't. No thanks.

Don't get me started on links that aren't underlined blue font and only reveal themselves on mouse-over.

I’d love an interactive guide that reflects real life experience with css, where every property mysteriously doesn’t work.

Why is it that any 2 year old can come up with a more concise, precise, and easy to understand layout system than any that has ever been invented?

> "One of the biggest Flexbox quality-of-life improvements in recent years has been the gap property. Gap allows us to create space in-between each Flex child, along the primary axis."

He is not wrong. It's an underrated improvement.

I couldn't believe it when gap arrived last year (2021) out of nowhere to solve the biggest issue I had with flexbox. No more assigning margins to flex items and dealing with the annoying side effect of that margin applying between item and container edge, rather than just between each item. CSS gap is applied on the flex container, and items can have zero margin, and everything just works now in flexbox.

A challenge for anyone who wants one, and because I’ve been pulling my hair out over this:

Make a taller-than-wide rectangle that always fills the maximum available space of the viewport without breaking aspect ratio. Inside have two elements: a square that always fills the max space while maintaining aspect ratio, and a rectangle that takes up all of whatever is left. Inside the inner square lay out 64 (or any n^2) elements as the tiles (like a chess board). No JS.

I’ve been fighting with flex and grid and aspect-ratio and getting into one of those rare moments where I feel viscerally angry. I think the main issue is aspect-ratio is a very very weak property.

This is great.

Unrelated but I was just wondering

“Content warning I make a food-related metaphor later in this tutorial.”

Why did the author have to include a content warning for food?