Расчёт итогового размера с flex-shrink [12/28], не могу понять, в чём суть расчёта.

Здравствуйте! Объясните пожалуйста, в чём суть этого “Расчёта итогового размера с flex-shrink”, если мне как раз таки flex-shrink и нужно определить?
Выходит, что нужно наугад подбирать значения flex-shrink и вставлять в эту формулу? Что-то я запутался(

Также прошу объяснить, почему у вас в формуле расчёта итогового размера с flex-shrink отрицательное пространство вдруг из отрицательного значения становится положительным?

image

3 Симпатий

Такой же вопрос возникает!

Учусь JavaScript, вот скрипт, который помогает подобрать итоговые размеры для трёх элементов.
За качество кода не ругайте, я новичок :slight_smile:

image

Сохраняете содержимое кода в index.html и открываете через любой браузер (желательно не IE):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Подбор flex-shrink для трёх элементов</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<style>
    label, input {
        margin-top: 5px;
    }

    input {
        width: 70px;
        text-align: center;
        margin-left: auto;
    }

    label[for="finalSizeElement1"], #finalSizeElement1 {
        margin-top: 15px;
    }

    .container {
        width: 350px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: baseline;
        border: 1px solid black;
        padding: 10px;
    }

    form {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

</style>
<form>
    <div class="container">
        <label for="containerWidth">Ширина контейнера, px</label>
        <input type="number" id="containerWidth" value="300" step="10">
        <label for="flexBaseSize1">Базовый размер элемента 1, px</label>
        <input type="number" id="flexBaseSize1" value="120" step="10">
        <label for="flexBaseSize2">Базовый размер элемента 2, px</label>
        <input type="number" id="flexBaseSize2" value="100" step="10">
        <label for="flexBaseSize3">Базовый размер элемента 3, px</label>
        <input type="number" id="flexBaseSize3" value="100" step="10">

        <label for="flexShrink1">flex-shrink элемента 1</label>
        <input type="number" id="flexShrink1" value="1" min="0">
        <label for="flexShrink2">flex-shrink элемента 2</label>
        <input type="number" id="flexShrink2" value="1" min="0">
        <label for="flexShrink3">flex-shrink элемента 3</label>
        <input type="number" id="flexShrink3" value="1" min="0">

        <label for="finalSizeElement1">Итоговый размер первого элемента, px</label>
        <input type="number" id="finalSizeElement1">
        <label for="finalSizeElement2">Итоговый размер второго элемента, px</label>
        <input type="number" id="finalSizeElement2">
        <label for="finalSizeElement3">Итоговый размер третьего элемента, px</label>
        <input type="number" id="finalSizeElement3">
    </div>
</form>
<script async>
    var containerWidth = document.getElementById('containerWidth');

    var flexBaseSize1 = document.getElementById('flexBaseSize1');
    var flexBaseSize2 = document.getElementById('flexBaseSize2');
    var flexBaseSize3 = document.getElementById('flexBaseSize3');

    var flexShrink1 = document.getElementById('flexShrink1');
    var flexShrink2 = document.getElementById('flexShrink2');
    var flexShrink3 = document.getElementById('flexShrink3');

    function raschet() {
        var op = (containerWidth.value - flexBaseSize1.value - flexBaseSize2.value - flexBaseSize3.value);
        var spbr = ((flexBaseSize1.value * flexShrink1.value) + (flexBaseSize2.value * flexShrink2.value) + (flexBaseSize3.value * flexShrink3.value));
        var nks1 = +(flexBaseSize1.value * flexShrink1.value / spbr);
        var nks2 = +(flexBaseSize2.value * flexShrink2.value / spbr);
        var nks3 = +(flexBaseSize3.value * flexShrink3.value / spbr);
        var finalSizeElement1 = document.getElementById('finalSizeElement1');
        var finalSizeElement2 = document.getElementById('finalSizeElement2');
        var finalSizeElement3 = document.getElementById('finalSizeElement3');
        finalSizeElement1.value = +(flexBaseSize1.value - (-1 * nks1 * op));
        finalSizeElement2.value = +(flexBaseSize2.value - (-1 * nks2 * op));
        finalSizeElement3.value = +(flexBaseSize3.value - (-1 * nks3 * op));
    }
    raschet();

    flexShrink1.onchange = function() {
        raschet();
    };

    flexShrink2.onchange = function() {
        raschet();
    };

    flexShrink3.onchange = function() {
        raschet();
    };

    flexBaseSize1.onchange = function() {
        raschet();
    };

    flexBaseSize2.onchange = function() {
        raschet();
    };

    flexBaseSize3.onchange = function() {
        raschet();
    };

    containerWidth.onchange = function() {
        raschet();
    }

</script>
</body>
</html>

и вообще данный случай решается проще:
racoon-green нужно уменьшить в два раза, и racoon-brown нужно уменьшить в два раза. Значит, их коэфициенты одинаковы. Может, это просто совпадение, или это и есть способ решения? :slight_smile:
И да, про уравнение со всеми неизвестными flex-shrink я тоже не понял. А вариант про JavaScript не объясняет формулу, это читтерство :slight_smile:

ребят, проще использовать обратную формулу вычисления.
Для растяжения:
допустим коэффициент первого элемента flex-grow=x1.
x1/(сумма всех xn)=(Итоговый размер-Базовый размер)/(Ширина контейнера-(сумма базовых размеров элементов))
Верхнее значение и будет нашим коэффициентом.Пример из испытания:
Базовые размеры трех элементов=25px. Итоговые размеры 50,100 и 150.
Считаем по формуле:
x1/(сумма всех xn)=1/9
x2/(сумма всех xn)=3/9
x3/(сумма всех xn)=5/9

Сжатие:
допустим коэффициент первого элемента flex-shrink=y1.
Базовый размер первого элемента* y1=Базовый размер - Итоговый размер/(-Отрицательное пространство)

Пример:
Базовые размеры: 200,400,200
Итоговые размеры: 150, 100,50 соответственно
y1/(y1+(2 * y2)+y3)=1/10
y2/(y1+(2 * y2)+y3)=3/10
y3/(y1+(2 * y2)+y3)=3/10
Наверно как-то так…у меня все сошлось

ясен красен что эта формула для обратного счета. речь то шла о том как собственно сам flex-grow посчитать, т.к. обычно мы знаем исходные размеры и конечные. никто в здравом уме не считает конечные размеры перебором flex-grow и flex-shrink. от дизайнера поступает четкая задача: было 100px, стало 75px. сделайте красиво на флексах.

ну так я вам и написала как посчитать. Допустим коэффициент первого элемента flex-grow=x1.

Верхнее значение в пропорции и есть коэффициент

вот это “допустим” очень радует. я вам говорю что подстановка это не научно, а вы мне “ну вот же по формуле подставляем”. формула не подразумевает подгонку результатов, а точно должна высчитывать неизвестную при всех остальных известных и может быть представлена в ином виде. то что приводят авторы курса это какая-то гуманитарная профанация. им на это уже указывали в нескольких тредах.

2 Симпатий

так это “допустим” для лучшего написания формулы. Это не подгонка как вы выразились, а точный расчет. Вам для лучшего понимания на листочке написать? Здесь простая математика. Авторы просто оставили возможность самостоятельно додумать.

точный расчет, основанный на выборе параметрического значения? вау. я даже комментировать это не могу.
вот вам задача №12
базовые размеры 100 и 300.
их нужно вписать в контейнер 200, сохранив пропорции.
задача решается исключительно подбором flex-shrink.
“формула” только проверяет решение, не решая абсолютно практической задачи (поиск .flex-shrink)

1 Симпатия

да, вы правы, на практике не применить…Из расчета получается вот так:
первый элемент flex-shrink:1;
второй элемент flex-shrink:1;
Тогда почему в испытании помогло?

мож кому и помогло, но я в свое время подбором его сделал, т.к. перевернув эту формулу и решив параметрическое уравнение, я получил такие корни, которые не удовлетворяют решению. не формула это короче =)

1 Симпатия

эх…а я так обрадовалась, что получилось, решила поделиться:sweat_smile:
Сейчас проверю условие, когда элементов >2

1 Симпатия

Вопрос - кому-нибудь расчеты итогового размера хоть раз пригодились на практике? Я серьезно.

1 Симпатия


это обычное уравнение с 2мя неизвестными
так как тут коэффициенты равны, то хватает решить уравнение для одного из элементов,
если бы не были равны, надо было бы выражать один коэффициент через другой и использовать 2 уравнения

о, математики в треде, класс, с заданием №12 вы справились, оно беcпонту легкое, т.к. корни равны друг другу. но тогда помогите с решением по тем же формулам с решением задачи № 11.
ура! я нашел кто мне расскажет как по этим формулам считать

“я ждал этого десять тысяч лет!” ©

1 Симпатия

ахахаха

Сводка

222222222222

Если у элемента flex-grow выставлен на 3, это не означает того, что он будет в три раза больше чем элемент у которого flex-grow стоит с параметром 1. Это будет означать то, что он получит в три раза больше пикселей к изначальной ширине, чем другой элемент.

Это первый ключевой аспект flex-grow и flex-shrink.

Соотношение размеров к друг другу, второй ключевой аспект.

Первый ключевой аспект + второй ключевой аспект = поднятый капюшон!!!
я тоже завтыкал в этой теме, но 10к лет это слишком…)))

2 Симпатий

Серьёзно?
за 3 года никто так и не дал вразумительного ответа по теме shrink? (комментарий не к обычным пользователям)
Значит 3wc придумали грандиозный выход для создания более менее вразумительных плавающих блоков, на ряду с float но и эти получились какие-то капризные девчёнки, которых необходимо уламывать с танцами и бубном. Ужас!
Вопрос grow решился при помощи маленькой программки на javascript, но shrink вообще не вариант((( думал хотя бы у вас тут что-то чёткое/цифровое найду, но к сожалению нет(

согласен, объяснение там 3-чку.
с минусом.
жирным

разобрался, кому интересно, дайте знать, я сформулирую и отпишусь здесь)

1 Симпатия