Мануель Матузович: max() Обман

За допомогою a допис Мануеля Матузовича який у вигляді демонстрації від Темані Афіф.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Ви зробите собі ласку, прочитавши розбивку Мануеля про все, що тут відбувається, але в основному це працює як еквівалент цього довшого синтаксису:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

...де:

• макс () ace приймає список числових значень CSS, розділених комами, де застосоване значення є найбільшим (або як MDN ставить це, «найпозитивніший») у наборі.
• 0px є першим значенням у наборі, гарантуючи, що найменше значення завжди буде більшим за нуль пікселів.
• (100% - 64rem) є другим «значенням» у наборі, але виражається як обчислення (зауважте, що calc() непотрібний), що віднімає the max-width елемента (64rem) від повної доступності width (100%). Залишилося місце, не зайняте елементом.
• ((100% - 64rem) / 2)) ділить простір, що залишився, порівну, оскільки ми розподіляємо його між внутрішніми межами елемента.
• max(0px, ((100% - 64rem) / 2)) порівнює 0px та (100% - 64rem) / 2). Використовується найбільше значення. У більшості випадків це буде результат рівняння, але якщо 64rem завжди більше, ніж обчислене значення повного елемента 100% ширина, він зафіксує це значення на нулі, щоб гарантувати, що воно ніколи не призведе до від’ємного значення.
• margin-inline це властивість, яку встановлює виграшне значення, яке застосовує поле до вбудованих сторін елемента — це логічний скорочений еквівалент встановлення того самого значення для margin-left та margin-right фізичні властивості.

Це та сама ідея Нещодавно Кріс поділився який використовує CSS max()функція для вирішення «Внутрішня проблема» — контейнер, який підтримує колір фону без рамки, одночасно обмежуючи вміст усередині нього padding.

max(), calc(), margin-inline… це багато новомодного CSS! І Мануель прямо в середині писати про ці та інші сучасні функції CSS протягом 100 днів.

Пряме посилання →