by 이듬(E.UID)

flex-container()

Flex 컨테이너(Container) 믹스인

용도

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

Flexbox 컨테이너 속성

속성

표준 값

display

flex | inline-flex

flex-direction

row | column | row-reverse | column-reverse

flex-wrap

nowrap | wrap | wrap-reverse

justify-content

flex-start | center | flex-end | space-between | space-around | space-evenly

align-items

flex-start | center | flex-end | stretch

align-content

flex-start | center | flex-end | stretch space-between | space-around | space-evenly

사용법

flex-container() 믹스인에 설정 가능한 값을 리스트로 전달합니다. (필요한 경우 모드 변경 가능)

flex-container($args:list [, $mode:string])

.usage {
  @include flex-container(column wrap justify-center items-center);
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$args

list

✔︎

$mode

string

flex

믹스인에 리스트로 전달 가능한 속성 이름은 flex-container-append() 믹스인을 참고하세요.

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

.usage {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

flex-container() 믹스인은 이름이 길어, 보다 간추려 쓰기 위한 flex-c() 믹스인 이름도 제공합니다.

.usage {
  @include flex-c(column wrap justify-center items-center);
}

inline-flex 표시 모드로 설정하려면 아래와 같이 콤마(,) 뒤에 모드 값을 추가합니다.

.usage {
  @include flex-c(justify-end items-start, inline-flex);
}

inline-flex-container() 믹스인을 사용할 수도 있습니다.

.usage {
  @include inline-flex-container(justify-end items-start);
}

로직

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

@mixin flex-container($args, $mode: flex) {
  display: if($mode == flex, flex, inline-flex);
  @include flex-container-append($args);
}

  1. $mode 매개변수에 값이 전달되지 않을 경우, 기본 값인 flex로 표시(display) 모드 설정

  2. $args 매개변수로 리스트 값이 전달되면 flex-container-append() 믹스인에 전달

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

@mixin flex-c($args, $mode: flex) {
  @include flex-container($args, $mode);
}

참고

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

PreviousFlex 컨테이너(Container)Nextflex-container-append()

Last updated