Финальное Испытание

Курсы §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;
}

.color-aqua,
.color-yellow,
.color-fuchsia {
flex-basis: 100px;
}

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

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

.brick-layout div:nth-child(8) {
flex-grow: 1;
}

2

Можно короче:
.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,
.color-yellow,
.color-fuchsia {
flex-basis: 100px;
}/

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

3

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

Если не указывать div - стиль не срабатывает

4

Работает. Я всегда проверяю код перед отправкой.

5

Подскажите,почему после того как я нажимаю проверить в системе не происходит никаких изменений

Имя файла изображения1366×768 129 KB

Страницу обновлял. Никаких изменений.Yandex-браузер, так же пробовал через Google Chrome

7

Код текстом, пожалуйста.

8

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

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

.color-aqua:nth-child(1),
.color-aqua:nth-child(3){
flex-basis:95px;
margin:5px;

}
.color-aqua:nth-child(2){
flex-basis:150px;
margin:5px;
flex-grow:1;
}

.color-yellow:nth-child(4),
.color-yellow:nth-child(6){
flex-basis:130px;
margin:5px;

}
.color-yellow:nth-child(5){
flex-basis:80px;
margin:5px;
flex-grow:1
}

.color-yellow:nth-child(5){
flex-basis:80px;
margin:5px;

}

.color-fuchsia:nth-child(7){
flex-basis:100px;
margin:5px;
flex-grow:0
}
.color-fuchsia:nth-child(8){
flex-basis:80px;
margin:5px;
flex-grow:1
}

9

Не очень понял, зачем дублировать flex-basis в блоке цветов?

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

Рабочий вариант или я что-то упускаю?

1 лайк