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


#1

Ничего не вычислял, но быстро удалось подобрать коэффициенты) Для первого brick-layout - коэффициенты flex-grow, для второго - flex shrink.

.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-1{
flex-grow: 1;
}

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

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

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

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

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


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

Ребят, объясните простым, русским языком, как вычислять f-grow и f-shrink в этом задании? а то делал всё методом тыка…


#3

Присоединяюсь к предыдущему вопросу!
Не понял еще вот чего: в Расчеты итогового размера flex-grow, второй шаг Доля свободного места = Свободное место / Сумма flex-grow всех элементов. Так мы же и ищем коэффициенты flex-grow, как мы в этом шаге можем сказать их сумму?? Иначе это получается не методика расчета, а простой перебор (типо того, что открой эти рисунки из задания в PS, посмотри количество пикселей сколько они занимают и раздели на flex-basis). Для flex-shrink аналогично. Или я чего-то не понимаю?


#4

Во флекс-шринк указывается доля базового размера элемента, которая должна “впитать” отрицательное пространство, то есть исчезнуть, отрезаться. Эта часть элемента как бы существует в отрицательном пространстве, а оставшаяся доля в видимом контейнере.
Например, у brick-4 итоговый видимый размер должен быть 150px, то есть лишние 50px, а именно ¼ от базового размера, должны оказаться в отрицательном пространстве, у оставшихся двух элементов по ¾ от базового размера урезаются и отправляются в отрицательное пространство. Вот и получается 1, 3, 3 или 2, 6, 6 или 25% 75% 75%(только без знаков процента) для brick-4, brick-5 и brick-6 соответственно.
А вот нормированный коэффициент сжатия показывает уже долю занимаемого элементом отрицательного пространства. Например, для brick-4 он 0.1, то есть 10% от -500px, то есть те самые 50px, которые мы у него отрезали.

Что касается флекс-гроу, то тут свободное пространство занимает 225px, которые надо распределить между элементами. Элементу brick-1 из них отдается 25px, то есть 1/9 от 225px, элементам brick-2 и brick-3 по 3/9 и 5/9 соответственно.

По крайней мере, так я поняла для себя.

Вот тут еще есть создана тема, посвященная этому вопросу flex-basis & flex-grow [8-9/28].


#5

А мне показалось удобнее рассчитывать flex-shrink по теории, но в обратном порядке, т.е. начиная с последнего пункта. Мои выкладки в таблице:


#6

Тоже хотел бы понять, как производится рассчет доступным языком. А то дали какие-то запутанные формулы и сразу задание.


#7

#8

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


#9

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

.brick-3 {
flex-basis: 25px;
flex-grow: 2;
}
.brick-1{
flex-grow: 0.4;
}
.brick-2 {
flex-grow: 1;
}
.brick-4 {
flex-basis: 200px;
flex-shrink :0.4
}

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

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

у меня так получилось на 95 %


#10

Не мое объяснение. Нашел в комментариях под заданием.

Постараюсь объяснить, как логически считаются коэффициенты. Для формул буду оперировать сокращениями: базовый размер – FB, размер после увеличения (flex-grow) – FG, размер после уменьшения (flex- shrink) – FS.
Для первой картинки: FB1=25, FB2=25, FB3=25. Размеры после увеличения (видно из образца): FG1=50, FG2=100, FG3=150. Для каждого блока находим разницу увеличенного размера и базового FG-FB: FG1-FB1=50-25=25, FG2-FB2=100-25=75, FG3-FB3=150-25=125. А теперь находим отношение разницы к базовому размеру (FG-FB)/FB. Для блока-1, блока-2, блока-3 получаем соответственно 25/25, 75/25, 125/25 или 1/1, 3/1, 5/1. Числа в числителях дробей и есть искомые коэффициенты flex-grow (1, 3, 5).
Для второй картинки: FB4=200, FB5=400, FB6=200. Размеры после уменьшения (видно из образца): FS4=150, FS5=100, FS6=50. Для каждого блока находим разницу базового размера и уменьшенного FB-FS: FB4-FS4 =200-150=50, FB5-FS5 =400-100=300, FB6-FS6 =200-50=150. А теперь находим отношение разницы к базовому размеру (FB-FS)/FB. Для блока-4, блока-5, блока-6 получаем соответственно 50/200, 300/400, 150/200 или 1/4, 3/4, 3/4. Числа в числителях дробей и есть искомые коэффициенты flex- shrink (1, 3, 3).


#11

Не понимаю почему у Вас это вызывает проблемы. Расчет очень прост, даже слишком.
От исходного размера отнимаем требуемый размер, получаем размер на который нужно ужаться. Этот полученный размер делим на исходный и получаем коэффициент сжатия. Так как он меньше единицы, я его умножаю на 100 и подставляю в flex-shrink:.

Для данного задания получается:

.brick-4 {
    flex-shrink: 25     
}

.brick-5 {
    flex-shrink: 75  
}

.brick-6 {
    flex-shrink: 75   
}

После того как, для всех flex-элеметов в блоке проставлю flex-shrink:, смотрю, могу ли я их сократить на какое-то число. Тут явно видно, что они сокращаются на 25.

Для себя набросал такую таблицу.