/* === Базовый контейнер === */
.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
}

/* === Направление flex-direction === */
.flex-row       { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col       { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* === Выравнивание элементов по главной оси (justify-content) === */
.justify-start     { justify-content: flex-start; }
.justify-end       { justify-content: flex-end; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.justify-around    { justify-content: space-around; }
.justify-evenly    { justify-content: space-evenly; }

/* === Выравнивание элементов по поперечной оси (align-items) === */
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.items-center     { align-items: center; }
.items-stretch    { align-items: stretch; }
.items-baseline   { align-items: baseline; }

/* === Выравнивание для самого контейнера на внешнем уровне (align-self) === */
.self-start      { align-self: flex-start; }
.self-end        { align-self: flex-end; }
.self-center     { align-self: center; }
.self-stretch    { align-self: stretch; }

/* === Обертка дочерних элементов (flex-wrap) === */
.flex-wrap       { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap     { flex-wrap: nowrap; }

/* === Отступы между дочерними элементами (gap) === */
.gap-1  { gap: 0.25rem; } /* 4px */
.gap-2  { gap: 0.5rem; }  /* 8px */
.gap-3  { gap: 1rem; }   /* 16px */
.gap-4  { gap: 1.5rem; } /* 24px */
.gap-5  { gap: 2rem; }   /* 32px */

/* === Размеры ширины и высоты контейнера === */
.full-width   { width: 100%; }
.full-height  { height: 100%; }

/* === Позиционирование дочерних элементов как самостоятельные flex-элементы === */
.item {
    flex: 1 1 auto;
}
.item-grow { flex-grow: 1; }
.item-shrink { flex-shrink: 1; }


.margin-center{
    margin-left: auto;
    margin-right: auto;
}