플렉스 유틸리티

플렉스 유틸리티 (Flex)

페이지 섹션에서 요소의 레이아웃과 정렬을 플렉스 컨테이너 방식으로 제어하는 유틸리티 클래스예요. 방향, 정렬, 축소·확장, 감싸기 등 각 클래스의 결과를 정리해 드릴게요.

출처: 문서

본문

예시 (Examples)

기본 (Basic)

  • Display flex
  • Display inline flex

방향 (Direction)

Flex row
  • Flex item 1
  • Flex item 2
  • Flex item 3
Flex row-reverse
  • Flex item 1
  • Flex item 2
  • Flex item 3
Flex column
  • Flex item 1
  • Flex item 2
  • Flex item 3
Flex column-reverse
  • Flex item 1
  • Flex item 2
  • Flex item 3

콘텐츠 정렬 (Justified content)

Justify content flex-start
  • Flex item 1
  • Flex item 2
  • Flex item 3
Justify content flex-end
  • Flex item 1
  • Flex item 2
  • Flex item 3
Justify content center
  • Flex item 1
  • Flex item 2
  • Flex item 3
Justify content space-around
  • Flex item 1
  • Flex item 2
  • Flex item 3
Justify content space-between
  • Flex item 1
  • Flex item 2
  • Flex item 3

항목 정렬 (Aligned items)

Align items flex-start
  • Flex item 1
  • Flex item 2
  • Flex item 3
Align items flex-end
  • Flex item 1
  • Flex item 2
  • Flex item 3
Align items center
  • Flex item 1
  • Flex item 2
  • Flex item 3
Align items baseline
  • Flex item 1
  • Flex item 2
  • Flex item 3
Align items stretch
  • Flex item 1
  • Flex item 2
  • Flex item 3

항목 자체 정렬 (Aligned self)

  • flex-start
  • center
  • flex end
  • baseline
  • stretch

콘텐츠 정렬 (Aligned content)

Align content flex-start
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5
Align content flex-end
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5
Align content center
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5
Align content space-around
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5
Align content space-between
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5
Align content stretch
  • Flex item 1
  • Flex item 2
  • Flex item 3
  • Flex item 4
  • Flex item 5

축소 (Shrink)

  • Flex shrink 0
  • Flex shrink 1

확장 (Grow)

  • Flex grow 0
  • Flex grow 1

Basis와 none (Basis and none)

  • Flex basis 0
  • Flex basis auto
  • Flex basis none
  • Flex 1

채우기 (Fill)

  • Flex none
  • Flex fill

감싸기 (Wrap)

Flex wrap
  • Flex item 1 ~ Flex item 10
Flex no wrap
  • Flex item 1 ~ Flex item 10
Flex wrap reverse
  • Flex item 1 ~ Flex item 10

문서 (Documentation)

개요 (Overview)

이 유틸리티가 효과를 내려면 부모 요소가 display: flex 또는 display: inline-flex로 설정되어 있어야 해요. 브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-flex-row-on-lg

사용법 (Usage)

클래스 (Class) 적용 대상 (Applied to) 결과 (Outcome)
.pf-v6-u-flex-direction-row{-on-[breakpoint]} * flex-direction: row로 설정해요.
.pf-v6-u-flex-direction-row-reverse{-on-[breakpoint]} * flex-direction: row-reverse로 설정해요.
.pf-v6-u-flex-direction-column{-on-[breakpoint]} * flex-direction: column으로 설정해요.
.pf-v6-u-flex-direction-column-reverse{-on-[breakpoint]} * flex-direction: column-reverse로 설정해요.
.pf-v6-u-justify-content-flex-start{-on-[breakpoint]} * justify-content: flex-start로 설정해요.
.pf-v6-u-justify-content-flex-end{-on-[breakpoint]} * justify-content: flex-end로 설정해요.
.pf-v6-u-justify-content-center{-on-[breakpoint]} * justify-content: center로 설정해요.
.pf-v6-u-justify-content-space-around{-on-[breakpoint]} * justify-content: space-around로 설정해요.
.pf-v6-u-justify-content-space-between{-on-[breakpoint]} * justify-content: space-between로 설정해요.
.pf-v6-u-align-items-flex-start{-on-[breakpoint]} * align-items: flex-start로 설정해요.
.pf-v6-u-align-items-flex-end{-on-[breakpoint]} * align-items: flex-start로 설정해요.
.pf-v6-u-align-items-center{-on-[breakpoint]} * align-items: center로 설정해요.
.pf-v6-u-align-items-baseline{-on-[breakpoint]} * align-items: baseline으로 설정해요.
.pf-v6-u-align-items-stretch{-on-[breakpoint]} * align-items: stretch로 설정해요.
.pf-v6-u-align-self-flex-start{-on-[breakpoint]} * align-self: flex-start로 설정해요.
.pf-v6-u-align-self-flex-end{-on-[breakpoint]} * align-self: flex-end로 설정해요.
.pf-v6-u-align-self-center{-on-[breakpoint]} * align-self: center로 설정해요.
.pf-v6-u-align-self-baseline{-on-[breakpoint]} * align-self: baseline으로 설정해요.
.pf-v6-u-align-self-stretch{-on-[breakpoint]} * align-self: stretch로 설정해요.
.pf-v6-u-align-content-flex-start{-on-[breakpoint]} * align-content: flex-start로 설정해요.
.pf-v6-u-align-content-flex-end{-on-[breakpoint]} * align-content: flex-end로 설정해요.
.pf-v6-u-align-content-center{-on-[breakpoint]} * align-content: center로 설정해요.
.pf-v6-u-align-content-space-between{-on-[breakpoint]} * align-content: space-between으로 설정해요.
.pf-v6-u-align-content-space-around{-on-[breakpoint]} * align-content: space-around로 설정해요.
.pf-v6-u-align-content-stretch{-on-[breakpoint]} * align-content: stretch로 설정해요.
.pf-v6-u-flex-shrink{1 or 0}{-on-[breakpoint]} * flex-shrink를 1 또는 0으로 설정해요.
.pf-v6-u-flex-grow{1 or 0}{-on-[breakpoint]} * flex-grow를 1 또는 0으로 설정해요.
.pf-v6-u-flex-basis{0 or auto}{-on-[breakpoint]} * flex-basis를 0 auto로 설정해요.
.pf-v6-u-flex-fill{-on-[breakpoint]} * flex를 1 1 auto로 설정해요.
.pf-v6-u-flex-wrap{-on-[breakpoint]} * flex-wrap: wrap으로 설정해요.
.pf-v6-u-flex-nowrap{-on-[breakpoint]} * flex-wrap: nowrap으로 설정해요.
.pf-v6-u-flex-wrap-reverse{-on-[breakpoint]} * flex-wrap: wrap-reverse로 설정해요.

더 알아보기 (Learn more)