마누엘 마투조비치: max() 속임수

방법으로 마누엘 마투조비치의 게시물 데모를 통해 테마니 아피프.

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

여기에서 일어나는 모든 일에 대한 Manuel의 분석을 읽는 것이 좋지만 기본적으로 다음과 같은 긴 구문과 동일하게 작동합니다.

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

…어디:

• max () 적용된 값이 가장 큰 CSS 숫자 값의 쉼표로 구분된 목록을 허용합니다(또는 MDN은 다음과 같이 말합니다., "가장 긍정적인") 하나입니다.
• 0px 가장 작은 값이 항상 XNUMX픽셀보다 크도록 하는 집합의 첫 번째 값입니다.
• (100% - 64rem) 집합의 두 번째 "값"이지만 계산으로 표현됩니다(참고: calc() 필요하지 않음) max-width 요소(64rem) 전체에서 사용 가능 width (100%). 남은 것은 요소가 차지하지 않은 공간입니다.
• ((100% - 64rem) / 2)) 요소의 인라인 경계 사이에서 나누기 때문에 나머지 공간을 균등하게 나눕니다.
• max(0px, ((100% - 64rem) / 2)) 비교하다 0px 와 (100% - 64rem) / 2). 가장 큰 값이 사용됩니다. 그것은 대부분의 경우 방정식의 결과이지만, 64rem 요소 전체의 계산된 값보다 항상 큽니다. 100% 너비, 음수 값이 발생하지 않도록 해당 값을 XNUMX으로 잠급니다.
• margin-inline 요소의 인라인 측면에 여백을 적용하는 우승 값이 설정하는 속성입니다. 이는 동일한 값을 margin-left 와 margin-right 물리적 특성.

같은 생각입니다 Chris가 얼마전에 공유했습니다. CSS를 사용하는 max()해결하는 기능 “내부 문제” — 풀 블리드 배경색을 지원하는 동시에 내부 콘텐츠를 padding.

max(), calc(), margin-inline... 그것은 많은 새로운 CSS입니다! 그리고 Manuel은 중간에 100일 동안 이러한 CSS 기능 및 기타 최신 CSS 기능에 대해 작성.

바로가기 →