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

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

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

Снимок
Снимок663×959 64.1 KB

Код:

.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. Помидорами просьба сильно не забрасывать, я еще очень зеленый.

2

Смотрите, Вы сами могли бы проверить, работает ли Ваша идея выполнения, если бы поменяли ширину блока “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. Никто не будет забрасывать) я на это надеюсь, во всяком случае

4 лайка
3

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

4

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

5

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

6

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

7

Без имени
Без имени1366×768 161 KB

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

8

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

9

Посмотрите пожалуйста код правильно или нет. Совпадение 100% но как-то стрёмно получилось.

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

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

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

}

.color-yellow:nth-child(4),
.color-yellow:nth-child(6) {
flex-grow: 1;
}

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

10

Я вот так накарябал. Мне категорически не нравится такое решение, т.к. не могу выбрать .color-yellow так как понимаю. В общем так работает, но мне не нравится.

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

.brick {
  min-height: 80px;
  flex-basis: 25%;
  margin:5px;
  flex-grow:1;
}
.color-aqua:not(:nth-child(2)),
.color-yellow:nth-child(5),
.color-fuchsia:not(:last-child){
  flex-grow:0;
}
11

margin 5px, можно было бы не каждому отдельному селектору-кирпичу назначить, а только селектору .brick, я так и сделал
.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;
}

.color-aqua:nth-of-type(2) {
flex-grow: 1;
}

.brick:nth-of-type(4), .brick:nth-of-type(6) {
flex-grow: 1;
}

.color-fuchsia:last-child {
flex-grow: 1;
}

:wink: