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

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

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

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

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

2 симпатии
#6

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

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

Сделал так -

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

#7

У меня получилось так сократить

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

2 симпатии
#8

Оцените код пожалуйста)
.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;
}

#9

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

2 симпатии
#10

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

#11

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

#12

апнем тему.
я пока не настолько гениален, чтобы заметить, что каждый второй “блок” растягивается, поэтому начал с того, чтобы для каждого цвета указывать flex-grow.
но не понимаю, почему для последней строки блоков не работает такое обозначение селектора:

.color-fuchsia:nth-child(2) {
flex-grow: 1;
}

что не так?

#13

Я тоже сразу заметил такой прикол, но потом понял, что .color-fuchsia:nth-child(2) будет выбирать не второй див с этим классом, а второй див во всём родительском потоке. Так же сработает с :nth-of-type(2).

#14

20/12/2022 - 100%.

.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-child(2n) {
 flex-grow:1; 
}
#15

Круто, увидел твой пример и сразу все переделал , еще раз прочитал про псевдоклассы , осталось научится применять их всегда ! Спасибо

#16

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

.brick {
min-height: 80px;
min-width: 50px;
flex-basis:100px;
margin:5px;
}
.brick:nth-child(2){
flex-grow:1;
}
.brick:nth-child(4){
flex-grow:1;
}
.brick:nth-child(6){
flex-grow:1;
}
.brick:nth-child(8){
flex-grow:1;
}