Alvaro Montoro

Posted on May 14, 2022 • Updated on May 17, 2022 • Originally published at alvaromontoro.com

Fun with justify-content

#css #html #webdev #joke

As part of the comiCSS webcomic, today I coded a cartoon about FlexBox and the values of justify-content:

Cartoon titled“Justify-content values” and 6 panels with a character. The eyes look different in all. First panel’s center, and both eyes are together in the center. Second one is flex-start and the eyes are on the left side of the face. Third one is flex-end, and both eyes are on the right side of the face. Fourth panel is space-around, the eyes have half-size space. Fifth one is space-between, the eyes are separated and far from each other. And the sixth is space-evenly, the eyes are way apart — See the live demo here or a video of how it was coded

I was trying to do something different and explain the concept in a fun way, illustrating the main options for justify-content:

flext-start: pack items at the beginning (by default, the left side).
flex-end: pack the items at the end (right side).
center: pack the items in the center.
space-evenly: all items will have the same space around them (even with the start and end of the container.)
space-around: the space between objects is the same, and the area at the beginning and end of the container will be half of that space.
space-between: the distance between all items is equal, with the first and last item touching the container edges.

There are more options for justify-content (stretch, left, right, start, end, and different combinations with safe and unsafe.) But I had to keep the cartoon short and straightforward, plus they wouldn’t be much different from some of the others.

Also, the comic strip assumes the default flex-direction of row. If we changed the value to column, the cartoon character would look more like a Picasso 😅

Next grid... maybe?