Здравствуйте! Объясните пожалуйста, в чём суть этого “Расчёта итогового размера с flex-shrink”, если мне как раз таки flex-shrink и нужно определить?
Выходит, что нужно наугад подбирать значения flex-shrink и вставлять в эту формулу? Что-то я запутался(
Также прошу объяснить, почему у вас в формуле расчёта итогового размера с flex-shrink отрицательное пространство вдруг из отрицательного значения становится положительным?
Такой же вопрос возникает!
Учусь JavaScript, вот скрипт, который помогает подобрать итоговые размеры для трёх элементов.
За качество кода не ругайте, я новичок 
Сохраняете содержимое кода в 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 нужно уменьшить в два раза. Значит, их коэфициенты одинаковы. Может, это просто совпадение, или это и есть способ решения? 
И да, про уравнение со всеми неизвестными flex-shrink я тоже не понял. А вариант про JavaScript не объясняет формулу, это читтерство
ребят, проще использовать обратную формулу вычисления.
Для растяжения:
допустим коэффициент первого элемента 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.
Верхнее значение в пропорции и есть коэффициент
вот это “допустим” очень радует. я вам говорю что подстановка это не научно, а вы мне “ну вот же по формуле подставляем”. формула не подразумевает подгонку результатов, а точно должна высчитывать неизвестную при всех остальных известных и может быть представлена в ином виде. то что приводят авторы курса это какая-то гуманитарная профанация. им на это уже указывали в нескольких тредах.
так это “допустим” для лучшего написания формулы. Это не подгонка как вы выразились, а точный расчет. Вам для лучшего понимания на листочке написать? Здесь простая математика. Авторы просто оставили возможность самостоятельно додумать.
точный расчет, основанный на выборе параметрического значения? вау. я даже комментировать это не могу.
вот вам задача №12
базовые размеры 100 и 300.
их нужно вписать в контейнер 200, сохранив пропорции.
задача решается исключительно подбором flex-shrink.
“формула” только проверяет решение, не решая абсолютно практической задачи (поиск .flex-shrink)
да, вы правы, на практике не применить…Из расчета получается вот так:
первый элемент flex-shrink:1;
второй элемент flex-shrink:1;
Тогда почему в испытании помогло?
мож кому и помогло, но я в свое время подбором его сделал, т.к. перевернув эту формулу и решив параметрическое уравнение, я получил такие корни, которые не удовлетворяют решению. не формула это короче =)
эх…а я так обрадовалась, что получилось, решила поделиться:sweat_smile:
Сейчас проверю условие, когда элементов >2
Вопрос - кому-нибудь расчеты итогового размера хоть раз пригодились на практике? Я серьезно.
о, математики в треде, класс, с заданием №12 вы справились, оно беcпонту легкое, т.к. корни равны друг другу. но тогда помогите с решением по тем же формулам с решением задачи № 11.
ура! я нашел кто мне расскажет как по этим формулам считать
“я ждал этого десять тысяч лет!” ©
ахахаха
Если у элемента flex-grow выставлен на 3, это не означает того, что он будет в три раза больше чем элемент у которого flex-grow стоит с параметром 1. Это будет означать то, что он получит в три раза больше пикселей к изначальной ширине, чем другой элемент.
Это первый ключевой аспект flex-grow и flex-shrink.
Соотношение размеров к друг другу, второй ключевой аспект.
Первый ключевой аспект + второй ключевой аспект = поднятый капюшон!!!
я тоже завтыкал в этой теме, но 10к лет это слишком…)))
Серьёзно?
за 3 года никто так и не дал вразумительного ответа по теме shrink? (комментарий не к обычным пользователям)
Значит 3wc придумали грандиозный выход для создания более менее вразумительных плавающих блоков, на ряду с float но и эти получились какие-то капризные девчёнки, которых необходимо уламывать с танцами и бубном. Ужас!
Вопрос grow решился при помощи маленькой программки на javascript, но shrink вообще не вариант((( думал хотя бы у вас тут что-то чёткое/цифровое найду, но к сожалению нет(
согласен, объяснение там 3-чку.
с минусом.
жирным
разобрался, кому интересно, дайте знать, я сформулирую и отпишусь здесь)
