Flex-Basis

Работает как width для flex-child пока есть свободное место между блоками.


.flex-child:nth-of-type(1) {
    flex-basis: 100px;
}

.flex-child:nth-of-type(2) {
    flex-basis: 10rem;
}

.flex-child:nth-of-type(3) {
    flex-basis: 10%;
}

.flex-child:nth-of-type(4) {
    flex-basis: 10em;
}

.flex-child:nth-of-type(5),
.flex-child:nth-of-type(6) {
    flex-basis: 100px;
}
1
2
4
3
5
6

Если свободного места нет и не wrap, то basis пересчитывается

Увеличим basis элементов в 3 раза!

1
2
4
3
5
6

.flex-child:nth-of-type(1) {
  flex-basis: 300px;
}

.flex-child:nth-of-type(2) {
  flex-basis: 30rem;
}

.flex-child:nth-of-type(3) {
  flex-basis: 30%;
}

.flex-child:nth-of-type(4) {
  flex-basis: 30em;
}

.flex-child:nth-of-type(5),
.flex-child:nth-of-type(6) {
  flex-basis: 300px;
}
back