Alvaro Montoro

Posted on May 14, 2022 • Edited 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?

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site