Какие знаешь свойства у flex

display: flex создает flex-контейнер. Основные свойства для контейнера:

• flex-direction – направление (row, column, row-reverse, column-reverse).
• justify-content – выравнивание по главной оси (flex-start, center, space-between, space-around).
• align-items – выравнивание по поперечной оси (stretch, center, flex-start, flex-end).
• flex-wrap – перенос элементов (nowrap, wrap, wrap-reverse).
• gap – расстояние между элементами.

Для flex-элементов:

• flex-grow – коэффициент растягивания.
• flex-shrink – коэффициент сжатия.
• flex-basis – базовый размер.
• align-self – индивидуальное выравнивание элемента.

Пример:

.container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.item {
  flex: 1 0 100px; /* grow, shrink, basis */
}