flex-item()

Flex 아이템(Item) 믹스인

용도

Flex Item 요소에 설정 가능한 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

Flexbox 아이템 속성

속성	표준 값
flex-grow	0, 양수
flex-shrink	0, 양수
flex-basis	content | <width> ( length, percentage, auto 중 하나)
align-self	flex-start | center | flex-end | self-start | self-end | baseline | stretch | safe | unsafe | ...
order	정수 (음수, 0, 양수)

믹스인에 사용 가능한 속성 (값은 연이어 설정)

믹스인에서 사용되는 속성 + 값	컴파일 되는 표준 속성
grow 또는 g + 값	flex-grow
shrink 또는 s + 값	flex-shrink
basis 또는 b + 값	flex-basis
auto | initial | none	flex
self-start | self-center | self-end | self-stretch | self-normal | self-auto | self-baseline | self-first-baseline | self-last-baseline | self-safe | self-unsafe | self-initial | self-inherit | self-unset	align-self
order 또는 o + 값	order

사용법

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

flex-item($args:list)

.usage {
  @include flex-item(self-end s 0 o 10);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$args	list	✔︎

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

.usage {
  align-self: flex-end;
  flex: 0 0 auto;
  order: 10;
}

flex-item() 믹스인 보다 간추려 쓰기 위한 flex-i() 믹스인 이름도 제공합니다.

.usage {
  @include flex-i(self-end s 0 o 10);
}

로직

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

@mixin flex-item($args) {
  @if $args != null {
    // align-self
    @each $keyword
      in self-auto
      self-normal
      self-start
      self-end
      self-center
      self-stretch
      self-baseline
      self-first-baseline
      self-last-baseline
      self-safe
      self-unsafe
      self-inherit
      self-initial
      self-unset
    {
      $self-value-index: index($args, $keyword);
      @if $self-value-index {
        $self-value: nth($args, $self-value-index);
        @include align-self($self-value, flex);
      }
    }

    @if is-include-items($args, auto initial none) {
      @if index($args, auto) {
        @include flex(auto);
      }
      @if index($args, initial) {
        @include flex(initial);
      }
      @if index($args, none) {
        @include flex(none);
      }
    }

    @if is-include-items($args, grow g shrink s basis b) {
      // flex-grow
      $grow-value: get-match-value-of-keys($args, grow g);
      // flex-shrink
      $shrink-value: get-match-value-of-keys($args, shrink s);
      // flex-basis
      $basis-value: get-match-value-of-keys($args, basis b);

      // flex
      @include flex(
        if($grow-value, $grow-value, 0) if($shrink-value, $shrink-value, 1)
          if($basis-value, $basis-value, auto)
      );
    }

    // order
    $order-value: get-match-value-of-keys($args, order o);
    @if $order-value {
      @include order($order-value);
    }
  }
}

1. 전달 받은 $args 매개변수를 분석하여 설정 가능한 속성을 처리

2. self-* 키워드 값을 분석해 align-self() 믹스인 호출
3. auto , initial , none 키워드를 사용한 경우, flex() 믹스인 호출
4. grow, shrink , basis 키워드를 사용한 경우, 각 값을 조립해 flex() 믹스인에 전달하여 호출
5. order 키워드의 경우 뒤이어 제공된 값과 함께 속성 설정

flex-i() 믹스인은 flex-item() 믹스인 래퍼로 보다 간단하게 쓰기 위해 작성되었습니다.

@mixin flex-i($args) {
  @include flex-item($args);
}

참고

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

• @mixin / @include
• @if / @else
• @each
• index()

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

• is-include-items()
• get-match-value-of-keys()
• flex()
• order()
• align-self()