Flex-контейнер

Утилитарные CSS классы для flex контейнеров

Flexbox

Наименования CSS классов для Flex-контейнеров состоят из следующих частей: {prefix}-{value}.

prefix - Префикс cds.

value - Используются следующие свойства:

flex-direction

CSS-классСвойство
.cds-flex-colflex-direction: column;
.cds-flex-rowflex-direction: row;
.cds-flex-row-reverseflex-direction: row-reverse;
.cds-flex-col-reverseflex-direction: column-reverse;

justify-content

CSS-классСвойство
.cds-justify-centerjustify-content: center;
.cds-justify-startjustify-content: flex-start;
.cds-justify-endjustify-content: flex-end;
.cds-justify-betweenjustify-content: space-between;
.cds-justify-aroundjustify-content: space-around;
.cds-justify-stretchjustify-content: stretch;

align-items

CSS-классСвойство
.cds-items-centeralign-items: center;
.cds-items-startalign-items: flex-start;
.cds-items-endalign-items: flex-end;
.cds-items-baselinealign-items: baseline;
.cds-items-stretchalign-items: stretch;

align-content

CSS-классСвойство
.cds-content-centeralign-content: center;
.cds-content-startalign-content: flex-start;
.cds-content-endalign-content: flex-end;
.cds-content-aroundalign-content: space-around;
.cds-content-betweenalign-content: space-between;
.cds-content-stretchalign-content: stretch;

align-self

CSS-классСвойство
.cds-self-autoalign-self: auto;
.cds-self-normalalign-self: normal;
.cds-self-centeralign-self: center;
.cds-self-startalign-self: flex-start;
.cds-self-endalign-self: flex-end;
.cds-self-baselinealign-self: baseline;
.cds-self-first-baselinealign-self: first baseline;
.cds-self-last-baselinealign-self: last baseline;
.cds-self-stretchalign-self: stretch;

flex-wrap

CSS-классСвойство
.cds-flex-wrapflex-wrap: wrap;
.cds-flex-nowrapflex-wrap: nowrap;
.cds-flex-wrap-reverseflex-wrap: wrap-reverse;
Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3