# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/scss-mixins/mixins/flexbox/flex-container/flex-container-append.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.