Documentation

Student-friendly HTML, CSS, and JavaScript reference with examples

Sections


                                        display: flex


                                        flex-direction:


                                        justify-content:


                                        align-items:


                                        position

CSS Flex Direction

The flex-direction property controls whether flex items are arranged horizontally or vertically.

/* Horizontal (default) */
.container {
  display: flex;
  flex-direction: row;
}

/* Vertical */
.container {
  display: flex;
  flex-direction: column;
}

Common values:

row - Items in a horizontal line (left to right)
column - Items in a vertical line (top to bottom)
row-reverse - Horizontal, but reversed
column-reverse - Vertical, but reversed