As a part of the comiCSS webcomic, right now I coded a cartoon about FlexBox and the values of justify-content:
I used to be attempting to do one thing completely different and clarify the idea in a enjoyable manner, illustrating the primary options for
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
finish, and completely different mixtures with
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
row. If we modified the worth to
column, the cartoon character would look extra like a Picasso 😅
Subsequent grid… possibly?