Испытание [28/28] 100%

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

Самый простой вариант, который сразу пришел в голову. Правда, изначально я подзабыл, как задается селектор nth-child и не мог понять, почему не работает код на yellow:nth-child(1) и (3).

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display:flex;
flex-wrap:wrap;
}
.brick {
min-height: 80px;
min-width: 50px;
margin:5px;
flex-basis:100px;
}
.color-aqua:nth-child(2){
flex-grow:1;
}
.color-yellow:nth-child(4){
flex-grow:1;
}
.color-yellow:nth-child(6){
flex-grow:1;
}
.color-fuchsia:nth-child(8){
flex-grow:1;
}

Уже после составления кода заметил, что элементы с “растяжкой” четные. В данном случае код CSS мог занимать 1 строку

1 лайк
2

В данном конкретном случае можно все nth-child записать вообще одной строкой:

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

1 лайк