CSS Flex Container

To use flex properties, the parent element must be defined as a flex container. These properties allow the parent to dictate how its children (flex items) are laid out.

---

The flex-direction Property

This property specifies the direction of the flex items: row, row-reverse, column, column-reverse.

.container {
    display: flex;
    flex-direction: column-reverse;
}

---

The flex-wrap Property

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {
    display: flex;
    flex-wrap: wrap; /* Items will wrap if content exceeds width */
}

---

The flex-flow Shorthand

The flex-flow property is a shorthand for both flex-direction and flex-wrap.

.container {
    display: flex;
    flex-flow: row wrap; /* Both direction and wrap in one line */
}

---

Aligning and Spacing

justify-content

Aligns the flex items along the main axis (horizontally in a row).

.container {
    justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}

---

align-content

This property is used to align lines of items vertically inside a flex container with multiple rows. (Note: Only works if flex-wrap: wrap; is active).

.container {
    align-content: space-between;
}

---

---