Comments 7
А как можно бороться с Рис.4? На флексах у меня решить проблему выхода третьего блока за границы контейнера не удалось.
Очень плохо когда переводчик не понимает того материала который переводит. В результате рождаются вот такие статьи которые вредны, потому, что из-за кривого перевода множат неверное понимание материала.
Как обычно бывает с флексами, все срезаются на понимании двух свойств flex-grow и flex-shrink
Как обычно бывает с флексами, все срезаются на понимании двух свойств flex-grow и flex-shrink
Ниже пример flex-grow. По аналогии с ним работает и shrink.
flex-grow это коэффициент, которые задает вес, сколько можно взять у существующего пула свободного пространства. Если этот пул есть.
Понятнее всего будет на примере.
Есть контейнер, ширина которого 500px
Есть элемента А, который когда положили на основную ось занял размер 100px. У элемента flex-grow = 1
Есть элемент B, который занял 200px. У элемента flex-grow = 2
width A + width B = 100 + 200 = 300px
свободный пул = 500 (размер контейнера) — 300 px (общий размер двух элементов) = 200px
Размер свободного пула получился 200px и у нас есть два элемнта у которых указано свойство flex-grow. Расчет дополнительного места которое выделиться для элементов делается следующим образом
flex-grow элемента А + flex-grow элемента B = 100% свободного пула
то есть коэффициенты flex-grow показывают то в каком отношении разделиться пул свободного пространства.
100% / 3 (3 — это сумма значений flex-grow) = 33% (что равно 66.6666px от 200px свободного пространства)
Элемент А, имеющий flex-grow 1 получит дополнитльно 33.333% от пула свободного пространства. Итого элемент А станет: 100px (его базовая ширина) + 66.66666px (согласно flex-grow 1) = 166.6666px
Элемент Б, имеющий flex-grow 2 получит дополнительно 66.666666% от пула свободного пространства. Итого элемент Б станет: 200px (его базовая ширина) + 133.33333px (согласно flex-grow 2) = 333.33333px
Совокупный размер = 166.6666 + 333.33333 = 500px
Аналогичным образом работает и fkex-shrink с той лишь разницей что заранее на основе базовых размеров вычисляет, сколько нужно дополнительного простраства чтобы все элементы согласно их базовым правилам, посетитель в контейнер. И этот пул распределяет согласно коэффициенту из flex-shrink
Понятнее всего будет на примере.
Есть контейнер, ширина которого 500px
Есть элемента А, который когда положили на основную ось занял размер 100px. У элемента flex-grow = 1
Есть элемент B, который занял 200px. У элемента flex-grow = 2
width A + width B = 100 + 200 = 300px
свободный пул = 500 (размер контейнера) — 300 px (общий размер двух элементов) = 200px
Размер свободного пула получился 200px и у нас есть два элемнта у которых указано свойство flex-grow. Расчет дополнительного места которое выделиться для элементов делается следующим образом
flex-grow элемента А + flex-grow элемента B = 100% свободного пула
то есть коэффициенты flex-grow показывают то в каком отношении разделиться пул свободного пространства.
100% / 3 (3 — это сумма значений flex-grow) = 33% (что равно 66.6666px от 200px свободного пространства)
Элемент А, имеющий flex-grow 1 получит дополнитльно 33.333% от пула свободного пространства. Итого элемент А станет: 100px (его базовая ширина) + 66.66666px (согласно flex-grow 1) = 166.6666px
Элемент Б, имеющий flex-grow 2 получит дополнительно 66.666666% от пула свободного пространства. Итого элемент Б станет: 200px (его базовая ширина) + 133.33333px (согласно flex-grow 2) = 333.33333px
Совокупный размер = 166.6666 + 333.33333 = 500px
Аналогичным образом работает и fkex-shrink с той лишь разницей что заранее на основе базовых размеров вычисляет, сколько нужно дополнительного простраства чтобы все элементы согласно их базовым правилам, посетитель в контейнер. И этот пул распределяет согласно коэффициенту из flex-shrink
Ну и базис тоже.
Я как-то на заре знакомства с флексами безуспешно пытался сделать равноширинные пункты меню через flex: 1 1 auto, тогда как правильно будет flex: 1 0 0. Меня поначалу даже пугал этот нулевой базис — ну как же может быть ноль, ведь внутри блока что-то есть, оно же не влезет и что-нибудь разопрёт!
Система несложная, когда уже разобрался, но поначалу поведение может показаться неочевидным.
Я как-то на заре знакомства с флексами безуспешно пытался сделать равноширинные пункты меню через flex: 1 1 auto, тогда как правильно будет flex: 1 0 0. Меня поначалу даже пугал этот нулевой базис — ну как же может быть ноль, ведь внутри блока что-то есть, оно же не влезет и что-нибудь разопрёт!
Система несложная, когда уже разобрался, но поначалу поведение может показаться неочевидным.
Как-то так, для наглядности. Если заменить у итемов 0 на 1, то изменения сразу будут очевидны
Sign up to leave a comment.
Flexbox: насколько велика эта гибкая коробка?