Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 14, 2022 02:33 am GMT

Fun with justify-content

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

Cartoon titledJustify-content values and 6 panels with a character. The eyes look different in all. First panels 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 wouldnt 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?

Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To