100% 28/28

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

Как то так
.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;
}

.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-last-child(1){
flex-grow: 1;
}

2

Это может сократить код:

.brick:nth-child(2n+2) {
flex-grow: 1;
}

4

Да, можно так. Спасибо!

5

а можно сократить еще больше)

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

.brick {
    min-height: 80px;
    min-width: 50px;
    flex-basis: 100px;
    margin: 5px;
}
.brick:nth-child(2n) {
    flex-grow: 1;
}
14 лайков