65 lines
2.3 KiB
CSS
65 lines
2.3 KiB
CSS
/* === Базовый контейнер === */
|
|
.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;
|
|
} |