"НІЧКА - Україна, Мам": https://music.youtube.com/watch?v=b81oakYLn3I&feature=share
YouTube
НІЧКА - Україна, Мам
Facebook: https://www.facebook.com/dayanichka
Instagram: https://www.instagram.com/dayanakulbida
TikTok: https://www.tiktok.com/@dayanichka
Для підтримки💌
Приват: 4731219644970067
PayPal: dayanichka.ua@gmail.com
—
Пісня «Україна, Мам» зіткана з моїх почуттів…
Instagram: https://www.instagram.com/dayanakulbida
TikTok: https://www.tiktok.com/@dayanichka
Для підтримки💌
Приват: 4731219644970067
PayPal: dayanichka.ua@gmail.com
—
Пісня «Україна, Мам» зіткана з моїх почуттів…
❤4
Во второй раз в своей жизни, я потерял все.
Сначала в 14 году. Потом в 24.02.
Только сейчас я каждую неделю продолжаю терять больше.
Только сейчас я теряю то, чего никогда не вернуть - своих родных людей.
Русский не поймет, как за плечами формируется кладбище, которое ничем перечеркнуть кроме желанием похоронить за него всех русских.
Єто написал русскоязчный, живущий в украине.
Сначала в 14 году. Потом в 24.02.
Только сейчас я каждую неделю продолжаю терять больше.
Только сейчас я теряю то, чего никогда не вернуть - своих родных людей.
Русский не поймет, как за плечами формируется кладбище, которое ничем перечеркнуть кроме желанием похоронить за него всех русских.
Єто написал русскоязчный, живущий в украине.
❤11👎2💔1
Комментарий @demimurych на видеоролик «youtubecom/watch?v=DQJXlih0voI» (ролик носит строго отрицательный характер и не рекомендуется в качестве обучающего материала)
Часть 1
Автор видео совершенно не разбирается в том, каким именно образом работают 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.
@AsForJavaScript
Часть 1
Автор видео совершенно не разбирается в том, каким именно образом работают 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.
@AsForJavaScript
🔥1
Комментарий @demimurych на видеоролик «youtubecom/watch?v=DQJXlih0voI» (ролик носит строго отрицательный характер и не рекомендуется в качестве обучающего материала)
Часть 2
Пример расчета.
Пусть ширина контейнера равна 400px
Пусть у нас будет три блока с свойствами:
Ширина блока 1 flex-basis = 100px (flex-grow:100) (flex-shrink=500)
Ширина блока 2 flex-basis = 50px (flex-grow:100) (flex-shrink=500)
Ширина блока 3 flex-basis = 70px (flex-grow:100) (flex-shrink=500)
То есть общая ширина трех блоков равна 100 + 50 + 70 и составит 220px
Тогда свободного пространства у нас осталось 400 — 220 = 180 px
Для каждого блока который имеет flex-grow выполнится следущая процедура:
180 (оставшееся место) / 300 (сумма значений всех flex-grow grow потока) * flex-grow элемента
Результат 60px
То есть, к каждому блоку добавится ровно 60 px вне зависимости от того, какого размера они были до этого.
И, наоборот, если размер контейнера у нас был 100px а размер элементов тот же,
выходит что 100 — 220 = — 120 не хватает для того чтобы разместить все блоки потока.
120 / 1500 (сумма значений flex-shrink всех элементов потока) * flex-shrink 500( в нашем случае он одинаковый для всех = 40
Поскольку у нас все блоки имеют одинаковое значение shrink то каждый блок уменьшиться ровно на 40 px
Блок 1 = 60
Блок 2 = 10
Блок 3 = 40
Так, я думаю, понятнее.
А ситуацию когда flex-basis вместе с flex-grow вышел за пределы расчетной длины - оставляю в качесстве домашнего задания. Потому как нужно учиться читать спецификацию. И если давать себе право учить людей - то учить людей тому что написано в спецификации, а не своим фантазиям.
Позорище.
@AsForJavaScript
Часть 2
Пример расчета.
Пусть ширина контейнера равна 400px
Пусть у нас будет три блока с свойствами:
Ширина блока 1 flex-basis = 100px (flex-grow:100) (flex-shrink=500)
Ширина блока 2 flex-basis = 50px (flex-grow:100) (flex-shrink=500)
Ширина блока 3 flex-basis = 70px (flex-grow:100) (flex-shrink=500)
То есть общая ширина трех блоков равна 100 + 50 + 70 и составит 220px
Тогда свободного пространства у нас осталось 400 — 220 = 180 px
Для каждого блока который имеет flex-grow выполнится следущая процедура:
180 (оставшееся место) / 300 (сумма значений всех flex-grow grow потока) * flex-grow элемента
Результат 60px
То есть, к каждому блоку добавится ровно 60 px вне зависимости от того, какого размера они были до этого.
И, наоборот, если размер контейнера у нас был 100px а размер элементов тот же,
выходит что 100 — 220 = — 120 не хватает для того чтобы разместить все блоки потока.
120 / 1500 (сумма значений flex-shrink всех элементов потока) * flex-shrink 500( в нашем случае он одинаковый для всех = 40
Поскольку у нас все блоки имеют одинаковое значение shrink то каждый блок уменьшиться ровно на 40 px
Блок 1 = 60
Блок 2 = 10
Блок 3 = 40
Так, я думаю, понятнее.
А ситуацию когда flex-basis вместе с flex-grow вышел за пределы расчетной длины - оставляю в качесстве домашнего задания. Потому как нужно учиться читать спецификацию. И если давать себе право учить людей - то учить людей тому что написано в спецификации, а не своим фантазиям.
Позорище.
@AsForJavaScript
Друзья, планируем трансляцию.
Находимся в режиме ожидания.
Как будет что-то конкретное, сразу отпишемся.
Находимся в режиме ожидания.
Как будет что-то конкретное, сразу отпишемся.
👍8
Друзья.
В 21:00 по МСК (20:00 по Киеву) планируем трансляцию с @demimurych.
Ждём всех желающих.)
Надеемся что в этот раз все получится.
В 21:00 по МСК (20:00 по Киеву) планируем трансляцию с @demimurych.
Ждём всех желающих.)
Надеемся что в этот раз все получится.
❤5👍2👀1