Чем отличается display flex от display grid? Как выравнивать элементы во flex?

display: flex и display: grid — это разные модели компоновки в CSS.

• Flexbox (flex) — предназначен для однострочной или одноколоночной компоновки элементов. Он хорошо подходит для выравнивания элементов по одной оси (горизонтальной или вертикальной).
• Grid — это двумерная система, позволяющая создавать сложные сетки с рядами и колонками.

Выравнивание элементов во flex

• justify-content — выравнивание по главной оси (например, по горизонтали в строке): flex-start, center, space-between и т.д.
• align-items — выравнивание по поперечной оси (например, по вертикали в строке): flex-start, center, stretch и др.
• align-self — индивидуальное выравнивание для отдельного элемента.

Пример:

.container {
  display: flex;
  justify-content: center; /* по горизонтали по центру */
  align-items: center;    /* по вертикали по центру */
  height: 200px;
}