Align and Justify

Justify-content

The justify-content property is used to align items along the main axis (horizontally for rows, vertically for columns). The possible values for it are:

• center - all items in the center
• flex-start - aligned to the left (row) or top (column)
• flex-end - aligned to the right (row) or bottom (column)
• space-between - aligned with equal space between the items
• space-around - like space between, but with the addition of space before the first item and after the last item

Try them all out to see how they work! Here's one example:

.container {
    display: flex;
    border: 3px solid #ff5376;

    flex-direction: row;
    justify-content: space-around;
}

Align-items

This property aligns items along the cross axis (vertically for rows, horizontally for columns).

The aling-items property can have one of the following values:

• stretch - default, stretches items to fill full height for rows, full width for columns
• flex-start - aligned to the top (row) or to the left (column)
• flex-end - aligned to the bottom (row) or to the right (column)
• center - center

To see this property in action for our row example, we'll have to add a larger height to the container, and then add the property.

.container {
    display: flex;
    border: 3px solid #ff5376;
    flex-direction: row;

    height: 300px;
    align-items: flex-start;
}