В этом конкретном случае вам необходимо учитывать эффект сжатия по умолчанию, установленный flex-shrink, который имеет значение по умолчанию 1. Первоначально ваш элемент будет переполнен, как показано ниже:
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
Если вы осмотрите элементы, у вас будет 1011.3px для первого элемента и 935.3px для второго, поэтому общее переполнение будет 1011.3px + 935.3px - 600px = 1346.6px. Это переполнение будет уменьшено от обоих элементов, чтобы они могли поместиться внутри гибкого контейнера. Также следует учитывать, что элементы не будут сжиматься одинаково, поскольку они не имеют одинаковую начальную ширину. Самый большой сократится больше. Тогда у нас будет коэффициент 1011.3/935.3 = 1.08, а формула будет:
x + y = 1346.6 where y = 1.08*x
То есть x = 647px и y = 699.6px
Мы закончим с 1011.3px - 699.6px = 311.7px и 935.3px - 673.3px = 288.3px:
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
Свойство flex-shrink указывает коэффициент сжатия Flex, который определяет степень сжатия элемента Flex относительно остальных элементов Flex в контейнере Flex при распределении отрицательного свободного пространства. исх
Примечание. Коэффициент усадки при изгибе равен , умноженному на базовый размер изгиба при распределении отрицательного пространства. Это распределяет отрицательное пространство пропорционально тому, насколько предмет может сжаться, так что, например, маленький предмет не будет уменьшаться до нуля, пока крупный предмет не будет заметно уменьшен. исх
Официальная спецификация для полного алгоритма:
https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
Имейте в виду, что существует ограничение min-width, которое может повлиять на окончательный расчет, поскольку по умолчанию элемент не может сжаться до размера его содержимого .
Здесь тот же код, что и выше, с некоторыми , и вы заметите, что вычисление отличается, потому что первый элемент имеет min-width ограничение, равное длине первого предложения, где у нас есть
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
Если вы удалите это ограничение, добавив min-width:0, вы получите предыдущие значения и некоторое переполнение:
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
min-width:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
А как насчет того, когда контент представляет собой не только текст, но и замененный контент, такой как изображения?
Применяется та же логика, на самом деле не имеет значения тип контента, все, что имеет значение, это размер элемента и min-width ограничения, которые зависят от контента.
Кроме того, должен ли я обычно практиковать явное задание свойств flex-based или width, чтобы избежать неопределенности размера элемента, основанного на содержимом?
Я бы сказал, да. У вас должен быть полный контроль над макетом, и вы не должны позволять контенту принимать решение за вас.