Skip to main content
CSS is fun and cool and I like it.
Article

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead.

One topic like this (which is … Read article “The peculiar magic of flexbox and auto margins”

Link

Grid to Flex

Article

A Quick Way to Remember the Difference Between `justify-content` and `align-items`

I was talking with a pal the other day and moaning about flexbox for the millionth time because I had momentarily forgotten the difference between the justify-content and align-items properties.

“How do I center an element horizontally with flex again?” I wondered. Well, that was when she gave me what I think is the best shorthand way of remembering how the two work together.… Read article “A Quick Way to Remember the Difference Between `justify-content` and `align-items`”

Link

Variable Order

Link

New flexbox guides on MDN

Article

Does CSS Grid Replace Flexbox?

No. Well. Mostly No.

Grid is much newer than Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

  1. Grid can do things Flexbox can’t do.
  2. Flexbox can do things Grid can’t do.
  3. They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
Read article “Does CSS Grid Replace Flexbox?”
Article

Squeezy Stretchy Flexbox Nav

I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn’t the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take up all the space, when available, but never squished too far. Those are concepts that flexbox makes pretty easy to express! Let’s dig in a little.… Read article “Squeezy Stretchy Flexbox Nav”

Article

The Media Object, A Bunch of Ways

The Media Object pattern is: image thingy on the left, heading and text on the right.

That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can be done many ways.… Read article “The Media Object, A Bunch of Ways”

Link

Should I use Grid or Flexbox?