items()

justify-items, align-items 믹스인

용도

CSS 박스 정렬(Box Alignment)을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

items() 믹스인은 box-alignment() 믹스인을 래핑하는 단축 믹스인입니다.

사용법

items() 믹스인에 인라인(x) 축 값, 블록(y) 축 값을 콤마(,)로 구분하여 전달합니다.

items($justify:string, $align:string)

.usage {
  @include items(center, center);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$justify	string		null
$align	string		null

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  justify-items: center;
  align-items: center;
}

로직

items() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin items($justify: null, $align: null) {
  @include box-alignment('items', $justify, $align);
}

1. 전달 받은 인자 값을 전달해 box-alignment() 믹스인 호출

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include

믹스인에 사용된 자제 제작 모듈은 다음과 같습니다.

• box-alignment()