CSS Flex Box

Notes from the Flexbox Zombies course.

.container {
    display: flex;
    flex-direction: row;
}

Justify Content

.container { display: flex; justify-content: flex-start; }

Controls the main axis. The main axis is defined by the flex-direction property. Default is row.

Align Items

.container { display: flex; align-items: flex-start; }

Controls the cross axis (that’s the axis perpendicular to the main axis). The main axis is defined by the flex-direction property.

• flex-start aligns items at the start of the cross axis. If the flex-direction is row (the default), it aligns items at the start of the vertical axis (that is, the first row). If the flex-direction is column, it aligns items at the start of the horizontal axis (that is, the first column).
• flex-end aligns items at the end of the cross axis. If the flex-direction is row, it aligns items at the end of the vertical axis (that is, the last row). If the flex-direction is column, it aligns items at the end of the horizontal axis (that is, the last column).
• stretch stretches the items to fill the container. If the flex-direction is row, it stretches the items to fill the vertical axis. If the flex-direction is column, it stretches the items to fill the horizontal axis.
• center aligns items at the center of the cross axis. If the flex-direction is row, it aligns items at the center of the vertical axis. If the flex-direction is column, it aligns items at the center of the horizontal axis.
• baseline aligns items at the baseline of the cross axis.

Stretching

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
}

Streching is the ability to stretch an item to fill the available space. It’s the default behavior of flex boxes. The flex-direction row is also the default direction. So that’s equivalent to:

.container {
    display: flex;
}