Испытание: гибкий поток [28/28]

Правильно ли я все сделал ? Хорош ли код ?

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

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

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

.brick-layout .color-yellow:nth-child(4),
.brick-layout .color-yellow:nth-child(6){
    flex-grow:1;
}
.brick-layout .color-fuchsia:last-of-type {
    flex-grow:1;
}

Чем меньше кода, тем лучше. Код по ссылке можно считать эталонным для этого задания.

1 симпатия

очень интересно и коротко!

Я только учусь…

Сделал так -

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

.brick {
min-height: 80px;
min-width: 50px;
}

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

.brick {
min-height: 80px;
min-width: 50px;

}

.color-aqua {
margin: 5px;
flex-basis: 25%;
}

.color-aqua:nth-child(2) {
flex-basis: 40%;
padding-right: 10px;
}

.color-yellow {
margin: 5px;
flex-basis: 25%;
}

.color-yellow:nth-child(4),
.color-yellow:nth-child(6) {
flex-basis: 30%;
flex-grow: 1;
}

.color-fuchsia {
margin: 5px;
flex-basis: 25%;
}

.color-fuchsia:nth-child(8) {
flex-grow: 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;

}

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

Оцените код пожалуйста)
.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display: flex;
flex-wrap: wrap;
}

.brick {
min-height: 80px;
min-width: 50px;
display: flex;
margin: 5px;
}
.color-aqua {
flex-basis: 100px;
}
.color-aqua:nth-of-type(2) {
flex-grow: 2;
}
.color-yellow:nth-of-type(5) {
flex-basis: 100px;
}
.color-yellow:nth-of-type(4),
.color-yellow:nth-of-type(6) {
flex-basis: 135px;
}
.color-fuchsia {
flex-basis: 100px;
}
.color-fuchsia:nth-of-type(8) {
flex-grow: 1;
}

.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;
}

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

1 симпатия

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

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

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

у класса .brick лишнее свойство display:flex