Испытание: гибкий поток [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; 
}
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;
}

17

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

.brick-layout >.brick:nth-child(even){flex-grow:1;}

18

.brick-layout {
width: 390px;
padding: 10px;
box-sizing: content-box;
display: flex;
flex-wrap: wrap;
gap: 10px

}

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

}
.color-fuchsia:last-child {
flex-grow: 1
}
.color-aqua:nth-child(2) {
flex-grow: 1
}
.color-yellow:nth-child(2n) {
flex-grow: 1
}