Learn Box Alignment
A cute walkthrough for flexbox and grid.
A cute walkthrough for flexbox and grid.
This is such a great way to explain a technology! Chris talks through his thought process when using flexbox for layout.
Jonathan shares his notes on that great flexbox container queries article from Heydon that I linked to.
Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.
This is some seriously clever thinking involving CSS custom properties, calc
, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!
I find this soooo relatable:
I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Difference is, Chris comes up with some very, very clever techniques.
Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.
Una has put together this handy one-pager of flexbox fallbacks for some common grid layouts.
A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:
I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.
A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting
flex-grow
to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
A really nice example of progressive enhancement: creating a layout with inline-block
, then flexbox, then Grid.
Paul’s being contrary again.
Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.
So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.
Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.
Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.
Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.
Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.
This is an unintuitive—but very handy—use of of the flex-grow
property. The use-case outlined here is fairly common.
I love the way that Charlotte is documenting her learning process. In this third part of the quantity queries + flexbox saga, it turns out that flexbox is capable of doing the magic all by itself!
This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.
It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.
The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:
.fukol-grid {
display: flex; /* 1 */
flex-wrap: wrap; /* 2 */
margin: -0.5em; /* 5 (edit me!) */
}
.fukol-grid > * {
flex: 1 0 5em; /* 3 (edit me!) */
margin: 0.5em; /* 4 (edit me!) */
}
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
The slides from Arelia’s flexbox talk.
The markup here (with proprietary inline attributes for styling) is a terrible idea but the demo that accompanies is great at showing how flexbox works …I just wish it didn’t try to abstract away the CSS. This is so close to being a really good learning tool for flexbox.