Холодные знания о том, как рассчитывается flex-shrink

.NET внешний интерфейс Тенсент CSS

Давайте сначала рассмотрим flex-grow

Предположим, есть div, содержащий три sub-div1, div2, div3, шириной 200px. Я полагаю, что те, кто использовал гибкую компоновку, хорошо знакомы с расчетом коэффициента распределения оставшегося пространства flex-grow. Вот простая формула расчета: Предположим, что flex-grow div1, div2 и div3 установлены соответственно на 1, 2 и 3. Теперь предположим, что ширина внешнего div составляет 800 пикселей, как назначить оставшиеся 800 пикселей - 3 * 200 пикселей = 200 пикселей трем дочерние дивы? Дополнительное пространство, выделенное для трех элементов div, выглядит следующим образом:

раздел 1:1 / (1 + 2 + 3) * 200px = 1/6 * 200px

раздел2:2 / (1 + 2 + 3) * 200px = 2/6 * 200px

раздел 3:3 / (1 + 2 + 3) * 200px = 3/6 * 200px

Дело в том, как рассчитывается flex-shrink?

Свойство flex-shink в основном используется, когда ширины внешнего div недостаточно, дочерний div сжимает определенное пространство, чтобы компенсировать недостаточную ширину. Например, ширина трех дочерних div теперь составляет 600 пикселей, но я установил ширину внешнего div на 500 пикселей, поэтому как дочерние элементы должны уменьшиться на 100 пикселей, если 600-500 пикселей недостаточно для отображения. В этот раз пригодится flex-shrink, как его рассчитать? Некоторые говорят, что это свойство похоже на flex-grow, и метод расчета аналогичен (на самом деле отличия есть). А вот как его рассчитать, многие не подскажут, в том числе и MDN, W3CShcool конкретной формулы не дал. Кроме того, я обнаружил, что многие статьи с большим количеством лайков давали неправильную формулу расчета. Вот почему я хочу написать эту статью.

Хорошо, давайте поговорим о том, как рассчитать место усадки без продажи! Сначала опубликуйте пример кода: html часть:

<div class="outer">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class="div3">3</div>
</div>

css-часть:

.outer {
  width: 500px;
  display: flex;
}
.outer div {
  height: 80px;
}

.div1 {
  flex: 1 1 100px;
  background: red;
}
.div2 {
  flex: 1 2 200px;
  background: yellow;
}
.div3 {
  flex: 1 3 300px;
  background: green;
}

Сначала рассчитайте общий вес TW = 100px * 1 (flex-shrink) + 200px *2 (flex-shrink) + 300px *3 (flex-shrink) = 1400px. Это сумма ширины каждого div, умноженная на коэффициент flex-shrink.

Пространство для сжатия каждого div: ширина div * коэффициент гибкости / общий вес TW * общая ширина для сжатия (в нашем случае 600px - 500px = 100px)

Таким образом, окончательная формула расчета ширины каждого div выглядит следующим образом:

div1最后的宽度 = 100px - 100*1/1400 * 100px = 92.86px

div2最后的宽度 = 200px - 200*2/1400 * 100px = 171.42px

div3最后的宽度 = 300px - 300*3/1400 * 100px = 235.72px

демонстрационный адрес:JS fiddle.net/Ling Zhen/Китай…

Скриншот ниже:

Советы: Увидев какие-то формулы в чужих статьях, не поленитесь, напишите пример для проверки сами, иначе вас введут в заблуждение, но вам понравится. Ведь практика приносит истинные знания!

Кстати: это свойство действительно редко используется по сравнению с flex-grow, поэтому многие люди не изучали, как оно рассчитывается.

Категории