default, display: block
flex
flex, gap
no wrap, items will shrink if not enough space
no wrap, but items are flex-shrink: 0, overflows if not enough space
no wrap, all items are flex-shrink: 0, but container is overflow: hidden
no wrap, all items are flex-shrink: 0, but container is overflow: auto
with wrap, items will move to next row if not enough space
with wrap, last Cat is flex-grow: 1
with wrap, all items are flex-grow: 1
items have flex-grow: 1, they grow to consume extra space
A & B are flex-grow: 1, Cat is flex-grow: 0.5
justify-content: center, works along major axis, in this case horizontal;
note: no flex-grow here
justify-content: space-around
justify-content: space-evenly
justify-content: space-between
justify-content: start (default)
justify-content: end
align-items: center, works along minor axis, in this case vertical;
note: no visible effect because container height is just enough to accommodate items
align-items: center, container is taller
align-items: center, Cat is flex-grow: 1
align-items: center, justify-content: center
container height is not specified
container height 200px, items shrink
container height 200px, items have flex-shrink: 0, Cat is deeppink and hidden underneath next content
container height 200px, items have flex-shrink: 0, Cat is deeppink and z-index: 1 to bring it on top layer
container height 200px with flex wrap, items have flex-shrink: 0
container height 200px without flex-wrap but overflow: auto, items have flex-shrink: 0,
justify-content: center
justify-content: center, align-items: center