Флексбокс, часть 2 / Испытание: гибкий поток [28/28]

Курсы §36. Флексбокс, часть 2
1

Добрый вечер,

Прошу проверить, нормально ли?

Спасибо!

.brick-layout {
display: flex;
width: 400px;
padding: 5px;
box-sizing: content-box;
flex-wrap: wrap;
}

.brick {
min-height: 80px;
min-width: 50px;
flex-basis: 100px;
margin: 5px;
}

.color-aqua:nth-child(2) {
flex-grow: 1;
}

.color-yellow:not(:nth-child(5)) {
flex-grow: 2;
}

.color-fuchsia:nth-child(8) {
flex-grow: 3;
}

2 лайка
2

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display: flex;
flex-flow: row wrap;
}

.brick {
min-height: 80px;
min-width: 50px;
margin: 5px;
flex-basis: 100px;
}

.brick:nth-child(2),
.brick:nth-child(4),
.brick:nth-child(6),
.brick:last-child{
flex-grow: 1;
}

3

Зачем grow растет? достаточно выставить везде единицу. Вы же не растягиваете блоки в строке согласно пропорции

  • можно сократить до:

.brick-layout {
display: flex;
flex-wrap: wrap;
width: 400px;
padding: 5px;
box-sizing: content-box;
}

.brick {
min-height: 80px;
min-width: 50px;
margin: 5px;
flex-basis: 100px;
}

.brick:nth-of-type(even) {
flex-grow: 1;
}

1 лайк
4

А зачем селектор по типу, если элементы однотипные? Можно же просто через nth-child(even) выбирать.