Memory Safe Languages in Android 13

An interactive guide to Flexbox

brandrick
810
87
13d
8
Technology
JOSHWCOMEAU.COM

Comments

slhck 13d
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...

ad404b8a372f2b9 13d
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!

jdthedisciple 13d
This is a beautiful, immensely valuable resource - straight into my bookmarked notes. Thank you!
thedangler 13d
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.

steveridout 13d
Nice work on the interactive elements in this guide, they're delightful!
nailer 13d
Try grid too - unless you need flexing, it's simpler than flexbox, even for single columns or rows.
frankzander 13d
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.
telagraphic 13d
I created https://www.flexulator.com for a deeper look into how the spacing algorithm works, you can see how the values are calculated.
bob1029 13d
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?

tigrezno 13d
Amazing guide, thanks!
tppiotrowski 12d
"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

ricardobayes 12d
This is really good, the language, the examples, just everything. It's right up my alley.
Existenceblinks 12d
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?
lewantmontreal 12d
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..
justin_oaks 12d
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.

tuukkah 12d
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.
c-smile 12d
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...

shlosky 12d
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.
quickthrower2 12d
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 :-)

jdhzzz 12d
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.

tehsauce 12d
I’d love an interactive guide that reflects real life experience with css, where every property mysteriously doesn’t work.
fijiaarone 12d
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?
exodust 12d
> "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.

Waterluvian 12d
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.

victor106 12d
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?