Fun with justify-content – DEV Community

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

See the live demo here or a video of how it was coded

I used to be attempting to do one thing completely different and clarify the idea in a enjoyable manner, illustrating the primary options for justify-content:

  • flext-start: pack gadgets at first (by default, the left facet).
  • flex-end: pack the gadgets on the finish (proper facet).
  • middle: pack the gadgets within the middle.
  • space-evenly: all gadgets can have the identical house round them (even with the beginning and finish of the container.)
  • space-around: the house between objects is similar, and the world at first and finish of the container might be half of that house.
  • space-between: the gap between all gadgets is equal, with the primary and final merchandise touching the container edges.

There are extra choices for justify-content (stretch, left, proper, begin, finish, and completely different mixtures with protected and unsafe.) However I needed to maintain the cartoon quick and easy, plus they wouldn’t be a lot completely different from a few of the others.

Additionally, the sketch assumes the default flex-direction of row. If we modified the worth to column, the cartoon character would look extra like a Picasso 😅

Subsequent grid… possibly?

Add a Comment

Your email address will not be published. Required fields are marked *