Manuel Matuzovic: max() Knep

Med hjälp av en inlägg av Manuel Matuzović som är i form av en demo av Temani Afif.

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

Du skulle göra dig själv en tjänst att läsa Manuels uppdelning av allt som händer här, men det fungerar i princip motsvarigheten till denna längre syntax:

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

…var:

• max () accepterar en kommaseparerad lista med numeriska CSS-värden, där det tillämpade värdet är det största (eller som MDN uttrycker det, den "mest positiva") i uppsättningen.
• 0px är det första värdet i uppsättningen, vilket säkerställer att det minsta värdet alltid kommer att vara större än noll pixlar.
• (100% - 64rem) är det andra "värdet" i uppsättningen, men uttrycks som en beräkning (observera att calc() är onödigt) som subtraherar the max-width av elementet (64rem) från dess fulla tillgängliga width (100%). Det som återstår är det utrymme som inte tas upp av elementet.
• ((100% - 64rem) / 2)) delar det återstående utrymmet lika eftersom vi delar det mellan elementets inline-gränser.
• max(0px, ((100% - 64rem) / 2)) jämför 0px och (100% - 64rem) / 2). Det största värdet används. Det blir resultatet av ekvationen i de flesta fall, men om 64rem är ständigt större än det beräknade värdet av elementets fulla 100% bredd kommer det att låsa det värdet på noll för att säkerställa att det aldrig resulterar i ett negativt värde.
• margin-inline är egenskapen som det vinnande värdet sätter, vilket tillämpar marginal på elementets inline-sidor – det är den logiska förkortningen som motsvarar att sätta samma värde på margin-left och margin-right fysikaliska egenskaper.

Det är samma typ av idé Chris delade för ett tag sedan som använder CSS max()funktion för att lösa "Inre problem" — en behållare som stöder en bakgrundsfärg med full utfall samtidigt som innehållet i den begränsas padding.

max(), calc(), margin-inline… det är mycket nymodigt CSS! Och Manuel är rätt smack dab i mitten av skriva om dessa och andra moderna CSS-funktioner under 100 dagar.

Direktlänk →