An Interest In:
Web News this WeekSearch Archive
Some of Our Sources
- Joshua Blankenship
- Six Revisions
- Vandelay Design
- You The Designer
- Creative Curio
- Fuel Your Creativity
- My Ink Blog
- CSS Globe
- Android Headlines
Fun with justify-content
As part of the comiCSS webcomic, today 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 was trying to do something different and explain the concept in a fun way, illustrating the main options for
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
end, and different combinations with
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
row. If we changed the value to
column, the cartoon character would look more like a Picasso
Next grid... maybe?
Original Link: https://dev.to/alvaromontoro/fun-with-justify-content-olk