Что такое единица гибкости fr в CSS, доступным и простым языком
Это статья — адаптированный перевод статьи The CSS Fractional Unit (Fr) In Approachable, plain Language
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Первым делом я хочу определиться с терминологией в этой статье и последующих. Самый верный перевод fractional unit в контексте Grid разработки и применения fr в ней же, это единица гибкости. Почему? Это вы поймете прочитав статью.
Сама по себе fr это новая форма единицы измерения, в основном ассоциируемая с CSS Grid.
Время чумовых историй
Давайте на чуток притворимся, что мы забыли про CSS Grid единицы гибкости. Ок? Отлично.
И так, представьте что у нас выходные и у нас есть большой, сочный и пористый торт.
Но затруднение в том, что вам надо разделить его на пять одинаковых кусков! И так, вы берете нож и приступаете к работе. Через пять минут у вас получается самая идеальная нарезка. Пять равных частей!
Отличная работа!
Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога. Реально? Что тогда делать? Собрать все разделенные пироги и волшебным образом связать их снова вместе, чтобы сделать снова равную нарезку?
Я бы не стал этого делать.
Применение
Это проблема с которой мы жили долгое время. Как и большой пористый пирог, у нас есть 100% ширина вдоль любого размера экрана.
Обратите внимание на разметку ниже:
<section><div></div><div></div><div></div><div></div><div></div></section>
У нас есть контейнер <section> который хранит в себе 5 <div>
Чтобы разделить 100% ширину равномерно и раздать каждому <div> равную ширину, вам нужно указать для каждого индивидуальную ширину в 20%. Почему?
Потому что у нас пять <div>. 100% разделить на 5 получается 20%.
Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога.
Если добавится еще один <div>, то вам придется пересчитывать всё и указывать заново ширину! 100% разделить на 6, ну дальше сами считайте.
И именно это та проблема, которую решает fr — единица гибкости.
Единица гибкости
С единицей гибкости (fr) вам не нужно что-то больше пересчитывать — вообще не нужно. На то она и единица гибкости, чтобы быть гибкой.
Если вы указываете ширину в 1fr, то вы можете дальше добавлять столько элементов, сколько возможно и это она об этом позаботиться. Ширина каждого элемента будет равномерно разделена среди дочерних элементов.
Вы не привязаны к целым значениям. Вы можете спокойно указывать такие значения как: 1.5fr 3fr 4.5fr В общем суть тут ясна.
Но давайте углубимся в математику. И разберем все более детально, как что происходит за кулисами расчета каждой единицы гибкости.
В нашем случае, общая доля равна 1.5fr + 3fr + 4.5fr = 9fr
Если родительский контейнер имеет ширину 900px
Первое значение, 1.5fr будет иметь ширину из расчета 1.5fr/9fr * 900px. Что выдает в итоге 150px.
Второе значение, 3fr будет иметь ширину 3fr/9fr * 900px. Что выдаст нам в итоге 300px.
Третье значение, 4.5fr будет иметь ширину 4.5fr/9fr * 900px. Что выдаст в итоге 450px.
С использованием таких единиц гибкости, нам предоставляются большие возможности в разработки гибких макетов. Поймайте момент, насладившись выкладкой контента с помощью CSS Grid разметки.
