/* Базовые флекс-контейнеры */
.f { display: flex; }
.f-inline { display: inline-flex; }
.f-auto{flex: auto}
.f-auto-1{flex: 1}

/* Направления */
f-as-c{align-self: center}
f-as-s{align-self: start}
f-as-e{align-self: end}

.f-row { flex-direction: row; }
.f-col { flex-direction: column; }
.f-row-rev { flex-direction: row-reverse; }
.f-col-rev { flex-direction: column-reverse; }

/* Главная ось (justify-content) */
.f-j-start { justify-content: flex-start; }
.f-j-end { justify-content: flex-end; }
.f-j-center { justify-content: center; }
.f-j-between { justify-content: space-between; }
.f-j-around { justify-content: space-around; }
.f-j-evenly { justify-content: space-evenly; }

/* Поперечная ось (align-items) */
.f-i-start { align-items: flex-start; }
.f-i-end { align-items: flex-end; }
.f-i-center { align-items: center; }
.f-i-stretch { align-items: stretch; }
.f-i-baseline { align-items: baseline; }

/* Многострочные контейнеры */
.f-wrap { flex-wrap: wrap; }
.f-nowrap { flex-wrap: nowrap; }
.f-wrap-rev { flex-wrap: wrap-reverse; }

/* Отступы (совместимо с grid) */
.f-gap-0 { gap: 0; }
.f-gap-xs { gap: 0.25rem; /* 4px */ }
.f-gap-sm { gap: 0.5rem; /* 8px */ }
.f-gap-md { gap: 1rem; /* 16px */ }
.f-gap-lg { gap: 1.5rem; /* 24px */ }
.f-gap-xl { gap: 2rem; /* 32px */ }

/* Управление элементами */
.f-grow { flex-grow: 1; }
.f-grow-0 { flex-grow: 0; }
.f-shrink-0 { flex-shrink: 0; }