Documentation

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

Sections


                                        display: flex


                                        flex-direction:


                                        justify-content:


                                        align-items:


                                        position

CSS Align Items

The align-items property aligns flex items along the cross axis (vertically for row, horizontally for column).

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

Common values:

flex-start - Align to the start (top for row, left for column)
center - Center the items
flex-end - Align to the end (bottom for row, right for column)
stretch - Stretch to fill the container (default)

Common pattern for centering:

.container {
  display: flex;
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically */
  height: 200px;
}