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 attcalc()
är onödigt) som subtraherar themax-width
av elementet (64rem
) från dess fulla tillgängligawidth
(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ör0px
och(100% - 64rem) / 2)
. Det största värdet används. Det blir resultatet av ekvationen i de flesta fall, men om64rem
är ständigt större än det beräknade värdet av elementets fulla100%
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
ochmargin-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.