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 all want).
I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that.Just adding
display: flex;to the parent element lays out the children in a row.
Well, that’s cool. I guess I could have floated them, but this is easier.
They should probably take up the full space they have though. Can I just stretch the parent to 100% wide? Well, I can, but that’s apparently not going to affect the child elements. … Read article “The Thought Process Behind a Flexbox Layout”
Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere.
The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and just 17 lines of CSS, with the heavy lifters being
object-fit.… Read article “Adaptive Photo Layout with Flexbox”
The short answer:
flex-basis are probably what you’re lookin’ for.… Read article “Making width and flexible items play nice together”