> 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/box-alignment/justify-content.md).

# justify-content()

justify-content 믹스인

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

[justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

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

`justify-content()` 믹스인에 정렬 키워드를 전달합니다.

> justify-content($valu&#x65;**:string**, $mod&#x65;**:string**)

```ruby
.usage {
  @include justify-content(end, flex);
  @include justify-content(between);
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|      $value     |  string  |      ✔︎      |               |
|      $mode      |  string  |              |     `grid`    |

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

```css
.usage {
  justify-content: flex-end;
  justify-content: space-between;
}
```

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

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

```ruby
@mixin justify-content($value, $mode: grid) {
  @if $value == 'start' {
    justify-content: if($mode == grid, start, flex-start);
  }
  @if $value == 'end' {
    justify-content: if($mode == grid, end, flex-end);
  }
  @if $value == 'center' {
    justify-content: center;
  }
  @if $value == 'left' {
    justify-content: left;
  }
  @if $value == 'right' {
    justify-content: right;
  }

  @if $value == 'normal' {
    justify-content: normal;
  }

  @if $value == 'between' {
    justify-content: space-between;
  }
  @if $value == 'around' {
    justify-content: space-around;
  }
  @if $value == 'evenly' {
    justify-content: space-evenly;
  }
  @if $value == 'stretch' {
    justify-content: stretch;
  }

  @if $value == 'safe' {
    justify-content: safe center;
  }
  @if $value == 'unsafe' {
    justify-content: unsafe center;
  }

  @if $value == 'inherit' {
    justify-content: inherit;
  }
  @if $value == 'initial' {
    justify-content: initial;
  }
  @if $value == 'unset' {
    justify-content: unset;
  }
}
```

1. 전달 받은 인자 값을 분석해 내부적으로 조건 처리
2. 조건과 일치하는 경우, 코드 출력

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

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [if()](https://sass-lang.com/documentation/modules#if)