> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/flexbox/flex-container/flex-container-append.md).

# flex-container-append()

## 용도 <a href="#use" id="use"></a>

기본적으로는 [flex-container()](/scss-mixins/mixins/flexbox/flex-container/flex-container.md) 믹스인 내부에서 호출되어 사용되며 [Flex Container](https://developer.mozilla.org/ko/docs/Glossary/Flex_Container) 요소에 설정 가능한 속성 중 `display` 를 제외한 나머지 속성을 전달 받은 값을 해석하여 설정합니다. 이 믹스인은 초기 설정 후, 반응형 웹 디자인 (미디어 쿼리에 의해 레이아웃이 변경)에서 유용하게 사용될 수 있습니다.

#### 믹스인에 사용 가능한 값

| 믹스인에서 사용되는 값                                           | 컴파일 되는 표준 속성                |                          |                                  |                                 |                                   |                                    |                                   |                                     |                                    |                                    |                                  |                              |                                |                             |                                  |                              |                                |                   |
| ------------------------------------------------------ | --------------------------- | ------------------------ | -------------------------------- | ------------------------------- | --------------------------------- | ---------------------------------- | --------------------------------- | ----------------------------------- | ---------------------------------- | ---------------------------------- | -------------------------------- | ---------------------------- | ------------------------------ | --------------------------- | -------------------------------- | ---------------------------- | ------------------------------ | ----------------- |
| `row` \| `column` \| `row-reverse` \| `column-reverse` | flex-direction              |                          |                                  |                                 |                                   |                                    |                                   |                                     |                                    |                                    |                                  |                              |                                |                             |                                  |                              |                                |                   |
| `nowrap` \| `wrap` \| `wrap-reverse`                   | flex-wrap                   |                          |                                  |                                 |                                   |                                    |                                   |                                     |                                    |                                    |                                  |                              |                                |                             |                                  |                              |                                |                   |
| <p><code>justify-start</code>                          | <code>justify-center</code> | <code>justify-end</code> | <br><code>justify-between</code> | <code>justify-around</code>     | <code>justify-evenly</code>       | </p><p><code>justify-normal</code> | <code>justify-left</code>         | <code>justify-right</code>          | <br><code>justify-safe</code>      | <code>justify-unsafe</code>        | <br><code>justify-inherit</code> | <code>justify-initial</code> | <code>justify-unset</code></p> | **justify**-content         |                                  |                              |                                |                   |
| <p><code>items-start</code>                            | <code>items-center</code>   | <code>items-end</code>   | <code>items-stretch</code>       | <br><code>items-baseline</code> | <code>items-first-baseline</code> | <code>items-last-baseline</code>   | <br><code>items-safe</code>       | <code>items-unsafe</code>           | <br><code>items-inherit</code>     | <code>items-initial</code>         | <code>items-unset</code></p>     | align-**items**              |                                |                             |                                  |                              |                                |                   |
| <p><code>content-start</code>                          | <code>content-center</code> | <code>content-end</code> | <br><code>content-between</code> | <code>content-around</code>     | <code>content-evenly</code>       | <br><code>content-stretch</code>   | <br><code>content-baseline</code> | <code>content-first-baseline</code> | <code>content-last-baseline</code> | </p><p><code>content-normal</code> | <code>content-left</code>        | <code>content-right</code>   | <br><code>content-safe</code>  | <code>content-unsafe</code> | <br><code>content-inherit</code> | <code>content-initial</code> | <code>content-unset</code></p> | align-**content** |

## 사용법 <a href="#usage" id="usage"></a>

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

> flex-container-append($args:**list**)

```ruby
.usage {
  @include flex-container-append(justify-evenly content-stretch);
}
```

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

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

```css
.usage {
  justify-content: space-evenly;
  align-content: stretch;
}
```

{% hint style="info" %}
flex-container-append() 믹스인 보다 간추려 쓰기 위한 flex-c-a() 믹스인 이름도 제공합니다.

```ruby
.usage {
  @include flex-c-a(justify-evenly items-stretch);
}
```

{% endhint %}

## 로직 <a href="#logic" id="logic"></a>

`flex-container-append()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@mixin flex-container-append($args) {
  @if $args != null {
    // flex-direction ------------------------------------------
    @each $direction in row row-reverse column column-reverse {
      $direction-index: index($args, $direction);

      @if $direction-index {
        flex-direction: nth($args, $direction-index);
      }
    }

    // flex-wrap -----------------------------------------------
    @each $wrap in nowrap wrap wrap-reverse {
      $wrap-index: index($args, $wrap);

      @if $wrap-index {
        flex-wrap: nth($args, $wrap-index);
      }
    }

    // justify-content ------------------------------------------
    @each $justifyContent
      in justify-start
      justify-center
      justify-end
      justify-left
      justify-right
      justify-normal
      justify-between
      justify-around
      justify-evenly
      justify-safe
      justify-unsafe
      justify-inherit
      justify-initial
      justify-unset
    {
      $justifyContent-index: index($args, $justifyContent);

      @if $justifyContent-index {
        $justifyContent-value: str-replace(
          nth($args, $justifyContent-index),
          'justify-'
        );
        @include justify-content($justifyContent-value, flex);
      }
    }

    // align-items ------------------------------------------------
    @each $alignItems
      in items-normal
      items-stretch
      items-start
      items-end
      items-center
      items-baseline
      items-first-baseline
      items-last-baseline
      items-safe
      items-unsafe
      items-inherit
      items-initial
      items-unset
    {
      $alignItems-index: index($args, $alignItems);

      @if $alignItems-index {
        $alignItems-value: str-replace(nth($args, $alignItems-index), 'items-');
        @include align-items($alignItems-value, flex);
      }
    }

    // align-content ------------------------------------------------
    @each $alignContent
      in content-start
      content-center
      content-end
      content-left
      content-right
      content-normal
      content-baseline
      content-first-baseline
      content-last-baseline
      content-between
      content-around
      content-evenly
      content-stretch
      content-safe
      content-unsafe
      content-inherit
      content-initial
      content-unset
    {
      $alignContent-index: index($args, $alignContent);

      @if $alignContent-index {
        $alignContent-value: str-replace(
          nth($args, $alignContent-index),
          'content-'
        );
        @include align-content($alignContent-value, flex);
      }
    }
  }
}
```

1. `$mode` 매개변수에 값이 전달되지 않을 경우, 기본 값인 `flex`로 표시(display) 모드 설정
2. `$args` 매개변수로 리스트 값이 전달되면 [flex-container-append()](/scss-mixins/mixins/flexbox/flex-container/flex-container-append.md) 믹스인에 전달

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

```ruby
@mixin flex-c-a($args) {
  @include flex-container-append($args);
}
```

## 참고 <a href="#reference" id="reference"></a>

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

* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [@each](https://sass-lang.com/documentation/at-rules/control/each)
* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [index()](https://sass-lang.com/documentation/modules/list#index)
* [nth()](https://sass-lang.com/documentation/modules/list#nth)

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

* [str-replace()](/scss-mixins/utilities/string/str-replace.md)
* [justify-content()](/scss-mixins/mixins/box-alignment/justify-content.md)
* [align-items()](/scss-mixins/mixins/box-alignment/align-items.md)
* [align-content()](/scss-mixins/mixins/box-alignment/align-content.md)