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

Курсы §36. Флексбокс, часть 2
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;
}

2 лайка
2

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

7 лайков
3

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

3 лайка
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 лайков
5

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

exam.JPG844×723 96.8 KB

4 лайка
6

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

1 лайк
7
7 лайков
8

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

1 лайк
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).

3 лайка
11

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

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

.brick-4 {
    flex-shrink: 25     
}

.brick-5 {
    flex-shrink: 75  
}

.brick-6 {
    flex-shrink: 75   
}

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

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

8 лайков
12

Я правильно понял что бы найти коэф. нужно посчитать по такой формуле:

(Базовый размер - Требуемый размер)/Базовый = Коэфициент??

А потом только все дроби к общему знаменателю подбить и все?

2 лайка
13

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

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

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

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

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

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

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

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

14

Добрый день. в этом разделе были формулы,
как рассчитать итоговые занимаемые пространства.
Но лично я так и не нашел в разделе ответа про то,
как рассчитать коэффициенты.
Я пользовался 3-им пунктом расчёта
“Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)” .
Давайте разберем на нашем примере.
Из .brick-layout видим ширину 300px (далее px опускаю).
Из образца видим, что желтый =150. Олива = 100 (150 * 1/3)
и Аква = 50(150 * 2/3). flex-basis: 25px из кода.
Он же ( flex-basis) в примере является и
базовым размером, и долей свободного места
Итак, к формуле.
Пусть коэффициенты будут = x, y, z
Тогда получим следующие коэффициенты расширения:

  1. 25 + 25x = 50 (x=1)
  2. 25 + 25y = 100 (y=3)
  3. 25 + 25z = 150 (z=5)

Теперь сжатие. Все тоже самое, только умножаем на -1.
(и при расширении, и при сжатии избавляемся от дробей
и приводим к наименьшим целым числам):
Из кода размеры flex-basis: 200, 400 и 200. Получим:

  1. 200 + 200x = 150 (x= -1/4 коэффициент = 1)
  2. 400 + 400y = 100 (y= -3/4 коэффициент = 3)
  3. 200 + 200z = 50 (z= -3/4 коэффициент = 3)

Получаем код в CSS:
.brick-layout {
display: flex;
box-sizing: content-box;
padding: 5px;
width: 300px;
}

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

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

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

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

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

.brick-1 {
flex-grow: 1
}

.brick-2 {
flex-grow: 3
}

.brick-3 {
flex-grow: 5
}

15

Спасибо за объяснение! Теперь все стало понятно)

16

Извините за критику, но подобные задания заставляют действовать методом подбора, так как формулы не дают понятия как точно подобрать shrink и grow. Потому такие задания решаются только методом экселя без каких либо проблем. Но дело в том что таких “загадок” вы врятли встретите в жизни, я сомневаюсь что вам когда нибудь для какого нить сайта придется перебирать это.

1 лайк
17

Вообще можно с помощью этих формул вычислить коэффициенты. Нужно составить систему линейных уравнений из стольки уравнений, сколько коэффициэнтов нужно вычислить. Я уже не помню в каком классе это проходят, ничего сверх сложного, но нужно потратить какое-то время даже для 2-3 элементов.Если кому интересно, могу скинуть фотку из своего листочка, потому что тут эти формулы муторно печатать.

1 лайк
18

вот код 100% может кому то поможет.
.brick-layout {
display: flex;
box-sizing: content-box;
padding: 5px;
width: 300px;
}

.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:2;
}

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

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

19

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

.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;
}

20

Управление элементами через свойства flex-grow, flex-shrink, flex-basis в реальных проектах.

Взял код из примера на данном ресурсе.

Только дошел да этой темы. Если смотреть на перспективу в будущих реальных проектах данные свойства будут полезны в адаптивной верстке.