Флексбокс, часть 2 [28/28]

Добрый день!
На протяжении всего испытания чувствовал, что что-то делаю не так, по итогу 100%.
Просьба оценить и сообщить, что не так и как можно было бы сделать.

Код:

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

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

.brick.color-aqua {
width: 150px;
}

.brick.color-aqua:nth-child(1) {
margin: 5px;
width: 100px;
}

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

.brick.color-aqua:nth-child(3) {
margin: 5px;
width: 100px;
}

.brick.color-yellow {
width: 135px;
}

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

.brick.color-yellow:nth-child(5) {
margin: 5px;
width: 100px
}

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

.brick.color-fuchsia {
width: 200px;
}

.brick.color-fuchsia:nth-child(7) {
margin: 5px;
width: 100px;
}

.brick.color-fuchsia:nth-child(8) {
margin: 5px;
flex-grow: 1;
}

P.S. Помидорами просьба сильно не забрасывать, я еще очень зеленый.

Смотрите, Вы сами могли бы проверить, работает ли Ваша идея выполнения, если бы поменяли ширину блока “brick-layout” на 300, или 200. Речь идет о переносе блоков, если изменить размер блока. Сам написал чуть по-другому, но тоже промахнулся. Порылся на форуме, и нашел, как по мне, изящное решение
.brick {
min-height: 80px;
min-width: 50px;
margin: 5px;
flex-basis: 100px;
}

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

Этого достаточно, и при изменении ширины блока тоже будет отрабатывать хорошо.

P.S. Никто не будет забрасывать) я на это надеюсь, во всяком случае

1 Симпатия

Если поменять ширину контейнера, то сьедет все содержимое!
или вы не об этом?

Мы как раз об этом) korn попросил посмотреть и оценить его верстку. Если в ней поменять ширину, то действительно все поедет. Я нашел код, который мне показался более удачным, и если в нём менять ширину, то все подстраивается под ширину, и выглядит аккуратно.

Если поменять ширину контейнера, все блоки съедут внутри), у меня такой же код, за исключением еven(потом заметил)

Может мы разный смысл вкладываем в поедет. Если Вы о перестроении блоков, то да, они будут перестраиваться, но они будут тянуться на всю ширину. не будет пустых “пятен”. Или же, я чего-то не понимаю, тогда лучше скрин показать. Или код, чтобы понять.


если увеличивать размер блока внутренние тянутся, так как grow, а вот при уменьшение-не знаю как сделать(

та нет, тут все верно. на практике едва ли появится необходимость в размере 210px. для этого можно использовать медиа-выражение. но все же, такой код делает данный блок гибким от 220px до любой ширины. та и задача тут стояла повторить раскладку блока, и сделать её гибкую, что в принципе, и было достигнуто. а так - нет предела совершенству :wink: