Search
Equal Columns With Flexbox: It’s More Complicated Than You Might Think
10.6.2021
As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing...
Understanding flex-grow, flex-shrink, and flex-basis
11.11.2020
When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:
<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div
And...
Holy Albatross with Widths
24.7.2020
Heydon’s Holy Albatross is a technique to have a row of elements break into a column of elements at a specific width. A specified parent width, not a screen width like a media query would have. So, like a container query (ya know, those things that don’t exist yet that we...
Making width and flexible items play nice together
1.7.2019
The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
The long answer
Let’s say you want to align an image and some text next to each other with like this:
Now let's say you reach for flexbox to make it happen. Setting the parent element to display: flex; is a good...