Испытание: Гибкий поток. Оцените код, пожалуйста.

Курсы §36. Флексбокс, часть 2
1 
100%, нужен фидбек, годится ли такое?

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

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

.color-aqua:nth-child(2) {
flex-basis: 170px;
}

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

.brick-layout .brick:last-child {
flex-grow: 1;
}
2

Можно сделать короче…
каждый второй – это :nth-child(even)

Мой вариант нужен, или…?

3

Или =) Спасибо за наводку

    .color-aqua:nth-child(2) {
        flex-basis: 170px;
    }

    .brick-layout .brick:nth-child(even) {
        flex-grow: 1;
    }
4

Можно сделать короче…
nth-child(2) один из :nth-child(even)
и правило для .brick придётся изменить…

1 лайк