Что такое flexbox простыми словами и зачем justify-content / align-items?

Flexbox — это способ раскладывать дочерние элементы внутри контейнера по одной оси (в ряд или в колонку), удобно управляя выравниванием и распределением свободного места.

Ставишь контейнеру display: flex — и его прямые дети становятся «флекс-элементами», по умолчанию выстраиваются в ряд слева направо. Дальше две главные ручки:

.box {
  display: flex;
  justify-content: center;   /* выравнивание ВДОЛЬ главной оси (по умолч. горизонталь) */
  align-items: center;       /* выравнивание ПОПЕРЁК главной оси (вертикаль) */
}

• justify-content — раскидывает по главной оси: center, flex-start, flex-end, space-between, space-around.
• align-items — прижимает поперёк: center, flex-start, flex-end, stretch.

Если поставить flex-direction: column, оси меняются местами, и тогда justify-content рулит уже по вертикали. Это главное, что путает новичков.

justify-content = вдоль линии, align-items = поперёк линии. Запомнить так проще всего.

Раскладка блоков в ряд/столбик.