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.

• space-between
• space-around
• flex-start
• flex-end
• center

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.

  Note that align-self overrides align-items for an individual item.

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;
}

Flex grow

flex-grow can be thought of as a ratio, that indicates the proportion of the available space should be assigned to an item’s main size (the flex-direction axis).

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

.item:nth-child(1) {
  flex-grow: 1
}