Испытание: мастер коэффициентов [14/28] 100% но есть вопрос

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

Сделал на 100%, но для второго контейнера использовал не коэффициент сжатия а min-width, можно ли было делать так или надо было обязательно через коэффициент?
.brick-layout {
display: flex;
width: 300px;
padding: 5px;
box-sizing: content-box;
}

.brick {
min-width: 0;
height: 100px;
}

.brick-1,
.brick-2,
.brick-3 {
flex-basis: 25px;
}

.brick-4 {
flex-basis: 200px;
}

.brick-5 {
flex-basis: 400px;
}

.brick-6 {
flex-basis: 200px;
}

.brick-1 {
flex-grow: 1;
}

.brick-2 {
flex-grow: 3;
}

.brick-3 {
flex-grow: 5;
}

.brick-4 {
min-width: 150px;
}

.brick-5 {
min-width: 100px;
}

.brick-6 {
min-width: 50px;
}

2
3

как я понял надо было через коэффициенты, верно?

4

Да, с помощью коэффициентов. Потому испытание и называется “Мастер”)

5

Я решал через коэффициенты, но, признаться, так и не понял, как к этому испытанию применить формулы расчета итоговых размеров, которые предлагались в предыдущих заданиях. Поэтому к правильном решению пришел путем простого перебора значений flex-grow и flex-shrink. Может кто-нибудь пояснит, какой смысл в формулах расчет итоговых размеров.

6 лайков
6

То же. Разве что могу добавить, что выбор, растягивать (grow) или сжимать (shrink), по-видимому зависит от базового размера элемента. Если базовый больше макетного - сжимать, если меньше - растягивать. Но я видел и другое решение во второй части задания.

Полагаю, никто этими коэффициентами не пользуется, чтобы делать с точностью до пикселя.

Зачем давать эти формулы? Разве что чтобы у нас было представление о том, как реально работает браузер. Наверное. Не могу придумать не синтетической задачи, где это реально понадобится.

7

Всем Добра! Та же проблема с применением формул!
Просто перебором подобрал! И хотелось бы понять для чего, а самое главное как пользоваться формулами?

8

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

.brick {
min-width: 0;
height: 100px;
}

.brick-1{
flex-grow:1;
}

.brick-2{
flex-grow:3;
}

.brick-3 {
flex-grow:5;
}

.brick-4 {
flex-shrink:1;
flex-basis: 200px;
}

.brick-5 {
flex-shrink:3;
flex-basis: 400px;
}

.brick-6 {
flex-shrink:3;
flex-basis: 200px;
}
100%