CSS Flexbox #12. Используем комбинацию свойств flex grow, flex shrink и flex basis 

*Автор видео совершенно не разбирается в том, каким именно образом работают flex layout* Цифры используемые в видео, представляют собой частный (упрощенный) случай, расчета размеров флекс элементов, в рамках которого, большинство ключевых значений формулы расчета их размеров - сокращаются. Совершенно неправильно говорить о том, что flex-basis это некий идеальный размер. Суть свойства flex-basis совершенно в другом. Равно как и flex-grow (для случая заполнения свободного пространства и flex-shrink для сокращения) это не пропорциональные увеличения одного блока в отношения других блоков, так как получилось у автора видео. Если у автора видео, будут попытки оправдать себя, я ему предлагаю решить простую (для тех кто понимает как работает flex layout) задачу: Дано: блок шириной 500px. Блок содержит три элемента. Каждому элементу задано свойство flex-basis: 20px;. Каждому элементу задано свойство flex-grow: 1; Первый блок из трех, содержит контент, для отображения которого требуется растянуть блок до 170px. Вопрос - на сколько будут растянуты блоки 2 и 3. И почему оказались именно такие цифры. *Которые естественно совершенно не соответствуют тому, что описывает автор видео* *После попытки посчитать эти цифры сразу становиться очевидным, что все то, что говорит автор видео является форменной чепухой, которая получила подтверждение в цифрах только благодаря тому, каким образом были выбраны начальные условия* *ИГОГО* Удалите это видео и не позорьтесь. А так же дайте себе труд познакомиться с настоящим алгоритмом расчета размера flex элементов и не множьте невежество. *Как на самом деле* flex-basis - это не какой-то идеальный размер. Это набор базовых величин блоков, относительно которых начинается расчет для случаев, когда блоки должны быть увеличены или уменьшены. Более того, существует целый ряд пограничных случаев, когда контент блока, который заставил блок увеличиться в размерах больше чем flex-basis + flex-grow приводит к запуску расчета величины элементов, без подобного блока. Базовый алгоритм, расчета того, каким образом заполняется свободное пространство (или уменьшается в случае потребности) выглядит следующим образом: Размер свободного пространства = Размер контейнера - Сумма размеров содержащих им блоков. При этом, в случае если flex-basis отличается от значения по умолчанию - то берется его значение в качестве размера блока, *даже в том случае, если контент блока выходит за рамки flex-basis* в этом суть flex-basis После чего, берется сумма всех css свойств flex-grow. Если у нас три блока и каждый имеет flex-grow равный 1, то сумма будет три. Если какой-то из блоков будет иметь отличный flex-grow - соотвественно и сумма измениться. Далее размер свободного пространства делится на сумму учавствующих в расчете flex-grow. В нашем примере это три. Полученная цифра в пикселях, будет являтся коэфициентом, который будет использован для увеличения блока, на величину flex-grow помноженное на рассчитанный коэффициент. Подчеркиваю - размер блока будет не выровнен по величине, но получит плюс к своему размеру. То есть происходит очень простой подсчет, когда доступное свободное пространство, пропорционально делиться между всей суммой flex-grow для flex элементов. По этой причине, совершенно неважно, написали мы для трех элементов grow равным 1, или равным 100. пример расчета непосредственно в цифрах я приведу в дочернем комментарии.

поделитесь секретом плиз как сделал импорт готовых иконов во внутрь html? спасибо!