Флексбокс, часть 2 / Испытание [28/28] 100% Оцените код

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

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

.brick {
min-height: 80px;
min-width: 50px;
margin: 5px;
}
.color-aqua {width: 100px;}
.color-aqua:nth-child(2) {width: 170px;}
.color-yellow {width: 135px;}
.color-yellow:nth-child(5) {width: 100px;}
.color-fuchsia {width: 100px;}
.color-fuchsia:nth-child(8) {flex-grow: 1;}

2

Вы не должны были писать ширину каждого элемента явно. Нужно использовать только коэффициент растяжения.

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;
width: 100px;
}

.color-aqua:nth-child(2) {flex-grow: 1}
.color-yellow:nth-child(4),
.color-yellow:nth-child(6) {flex-grow: 1;}
.color-fuchsia:nth-child(8) {flex-grow: 1;}

Так?

4

Если вспомнить формулы nth-child, то можно записать короче.

5

через nth-child(even) ?

1 лайк
6

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

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

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

1 лайк
7

Я тоже так сделал. Сначала всем блокам flex-basis:100px, а потом тем что побольше flex-grow:1 и все дела. Довольно простенькое финальное испытание в этом курсе, вот в первой части с палитрами пришлось помучиться.

1 лайк