Flexbox
Наименования CSS классов для Flex-контейнеров состоят из следующих частей: {prefix}-{value}.
prefix - Префикс cds.
value - Используются следующие свойства:
flex-direction
| CSS-класс | Свойство |
|---|
.cds-flex-col | flex-direction: column; |
.cds-flex-row | flex-direction: row; |
.cds-flex-row-reverse | flex-direction: row-reverse; |
.cds-flex-col-reverse | flex-direction: column-reverse; |
justify-content
| CSS-класс | Свойство |
|---|
.cds-justify-center | justify-content: center; |
.cds-justify-start | justify-content: flex-start; |
.cds-justify-end | justify-content: flex-end; |
.cds-justify-between | justify-content: space-between; |
.cds-justify-around | justify-content: space-around; |
.cds-justify-stretch | justify-content: stretch; |
align-items
| CSS-класс | Свойство |
|---|
.cds-items-center | align-items: center; |
.cds-items-start | align-items: flex-start; |
.cds-items-end | align-items: flex-end; |
.cds-items-baseline | align-items: baseline; |
.cds-items-stretch | align-items: stretch; |
align-content
| CSS-класс | Свойство |
|---|
.cds-content-center | align-content: center; |
.cds-content-start | align-content: flex-start; |
.cds-content-end | align-content: flex-end; |
.cds-content-around | align-content: space-around; |
.cds-content-between | align-content: space-between; |
.cds-content-stretch | align-content: stretch; |
align-self
| CSS-класс | Свойство |
|---|
.cds-self-auto | align-self: auto; |
.cds-self-normal | align-self: normal; |
.cds-self-center | align-self: center; |
.cds-self-start | align-self: flex-start; |
.cds-self-end | align-self: flex-end; |
.cds-self-baseline | align-self: baseline; |
.cds-self-first-baseline | align-self: first baseline; |
.cds-self-last-baseline | align-self: last baseline; |
.cds-self-stretch | align-self: stretch; |
flex-wrap
| CSS-класс | Свойство |
|---|
.cds-flex-wrap | flex-wrap: wrap; |
.cds-flex-nowrap | flex-wrap: nowrap; |
.cds-flex-wrap-reverse | flex-wrap: wrap-reverse; |