justify-content, align-items, and align-content Properties

Just try and justify the apocalypse

justify-content: This determines how the content is distributed across the main-axis that you’ve chosen (horizontal for rows, vertical for columns).

.undead-parent {
    justify-content: center;
}

justify-content can have the following values:

• center: This puts the items in the center of the row or column.
• flex-start: This bunches the items at the left or top.
• flex-end: This bunches the items at the right or bottom.
• space-around: This makes sure there’s equal space on the right and left (or top and bottom) of each item. It includes some space on the ends between the flexed item and the sides of the flex container.
• space-between: This maximizes space between the items. It leaves no space between the items and the edges of the container.
• space-evenly: This sets the same amount of space between items as there is between items and the container’s edges.
• stretch: This stretches the rows/columns to fill the container. (This is the default.)