Documentation

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

Sections


                                        display: flex


                                        flex-direction:


                                        justify-content:


                                        align-items:


                                        position

Flexbox is a powerful layout system that makes it easy to arrange elements in rows or columns.

.container {
  display: flex;
}

When you set display: flex on a container, its children become “flex items” that you can easily arrange.

Basic example:

.container {
  display: flex;
  gap: 10px;  /* Space between items */
}

This puts all child elements in a row with 10px spacing between them.