This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. Display flex.

The parent element is used to target Flexbox which will be applied to the children element

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out.

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case the inline axis running horizontally.

Flex end is responsible items packed to the end of the container. The more support -flex-​end honors the flex-direction while end honors the writing-mode direction.

Space between is responsible for items being evenly distributed in the line; first item is on the start line, last item on the end line

By default, child elements of a grid will fill up each column until a row is filled, then it'll flow into the next beneath it. This is why the default for grid-auto-flow is set to row because we're filling up rows of the grid first.

Thankfully, CSS Grid Layout introduces a new unit of length called fr, which is short for “fraction”. MDN defines the fr unit as a unit which represents a fraction of the available space in the grid container.

When an item has flex-grow of 0 it won’t grow past its flex basis parameter.