flex()

flex 속성 믹스인

용도

flex 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

flex 속성은 하나의 Flex Item 요소가 자신을 포함하는 Flex Container 요소가 차지하는 공간에 맞추기 위해 크기를 키우거나, 줄이는 방법을 설정합니다. flex 속성은 flex-grow, flex-shrink, flex-basis 세부 속성을 한데 묶어 설정할 수 있는 단축 속성입니다.

사용법

flex() 믹스인에 설정 가능한 값을 전달합니다.

flex($value:[string, number])

.usage {
  @include flex(auto); // CSS 컴파일 결과 → flex: 1 1 auto
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$value	[string, number]	✔︎

로직

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

@mixin flex($value) {
  @if $value == 1 {
    flex: 1 1 0;
  }
  @if $value == auto {
    flex: 1 1 auto;
  }
  @if $value == initial {
    flex: 0 1 auto;
  }
  @if $value == none {
    flex: 0 0 auto;
  }
  @if not is-valid-keywords($value, 1 auto initial none) {
    flex: $value;
  }
}

1. 전달 받은 인자 값이 1, auto, initial, none 일 경우, 개별 조건 처리

2. 조건 유형에 맞지 않을 경우, 전달 받은 인자 값을 flex 속성 값으로 설정

참고

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

• @mixin / @include

• @if / @else

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

• is-valid-keywords()