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

Курсы §36. Флексбокс, часть 2
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-layout .brick:nth-child(2n){
flex-grow: 1;
}

41 лайк
2

Это гениально :scream_cat:

Я что-то в это сжатие и расширение не очень въехал :slight_smile:

4 лайка
3

Вау! Шедеврально! Сам не заметил, что все элементы четные.

1 лайк
4

я использовал

:nth-of-type(even)
4 лайка
6

каким же глупым я себя чувствую, после этого. Не потому что не понимаю,а потому что не додумался сам

1 лайк
7

Хм, у меня более громоздкий вариант:

Спойлеры 
.brick-layout {
  width: 400px;
  padding: 5px;
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
}

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

.color-yellow:nth-child(5) {
 flex-grow: 0;
}

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

Это вы просто мой еще не видели рукалицо :no_mouth:

1 лайк
9

Шедевр. Краткость, как говорится, сестра)

Можно без контекстного селектора в конце.

10

Вопрос, как вы дошли до такого лаконичного кода?

11

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

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

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