Flex

Flex (플렉스)

완전한 반응형 flexbox 유틸리티 모음으로 그리드 열, 내비게이션, 컴포넌트 등의 레이아웃, 정렬, 크기를 빠르게 관리하는 방법에 대해 알아봅니다. 더 복잡한 구현은 사용자 정의 CSS가 필요할 수 있습니다.

출처: 문서

본문

플렉스 동작 활성화 (Enable flex behaviors)

display 유틸리티를 적용해 flexbox 컨테이너를 만들고 직계 자식 요소를 플렉스 아이템으로 변환합니다. 플렉스 컨테이너와 아이템은 추가 flex 속성으로 더 수정할 수 있습니다.

<div class="d-flex p-2">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

.d-flex와 .d-inline-flex의 반응형 변형도 존재합니다.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex
• .d-xxl-flex
• .d-xxl-inline-flex

방향 (Direction)

방향 유틸리티로 플렉스 컨테이너 안에 있는 플렉스 아이템의 방향을 설정합니다. 대부분의 경우 브라우저 기본값이 row이므로 여기서 가로 클래스를 생략할 수 있습니다. 하지만 반응형 레이아웃처럼 값을 명시적으로 설정해야 하는 상황을 마주할 수도 있습니다.

.flex-row로 가로 방향(브라우저 기본값)을 설정하거나, .flex-row-reverse로 반대쪽에서 가로 방향을 시작합니다.

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-column으로 세로 방향을 설정하거나, .flex-column-reverse로 반대쪽에서 세로 방향을 시작합니다.

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

flex-direction의 반응형 변형도 존재합니다(각 방향에 .flex-sm-, .flex-md-, .flex-lg-, .flex-xl-, .flex-xxl-* 접두어 변형).

주축 정렬 (Justify content)

flexbox 컨테이너에 justify-content 유틸리티를 사용해 주축(처음에는 x축, flex-direction: column이면 y축)을 따라 플렉스 아이템의 정렬을 바꿉니다. start(브라우저 기본값), end, center, between, around, evenly 중에서 선택하세요.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

justify-content의 반응형 변형도 존재합니다(각 값에 .justify-content-sm-, .justify-content-md-, .justify-content-lg-, .justify-content-xl-, .justify-content-xxl-* 접두어 변형).

교차축 정렬 (Align items)

flexbox 컨테이너에 align-items 유틸리티를 사용해 교차축(처음에는 y축, flex-direction: column이면 x축)을 따라 플렉스 아이템의 정렬을 바꿉니다. start, end, center, baseline, stretch(브라우저 기본값) 중에서 선택하세요.

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

align-items의 반응형 변형도 존재합니다(각 값에 .align-items-sm-, .align-items-md-, .align-items-lg-, .align-items-xl-, .align-items-xxl-* 접두어 변형).

자기 정렬 (Align self)

flexbox 아이템에 align-self 유틸리티를 사용해 교차축을 따라 개별 아이템의 정렬을 바꿉니다. align-items와 같은 옵션인 start, end, center, baseline, stretch(브라우저 기본값) 중에서 선택하세요.

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self의 반응형 변형도 존재합니다(각 값에 .align-self-sm-, .align-self-md-, .align-self-lg-, .align-self-xl-, .align-self-xxl-* 접두어 변형).

채우기 (Fill)

일련의 형제 요소에 .flex-fill 클래스를 사용하면 내용(content)이나 border-box와 같은 너비(내용이 border-box를 넘지 않을 때)로 강제하고, 사용 가능한 모든 가로 공간을 차지하게 합니다.

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

flex-fill의 반응형 변형도 존재합니다(.flex-sm-fill, .flex-md-fill, .flex-lg-fill, .flex-xl-fill, .flex-xxl-fill).

Grow와 shrink (Grow and shrink)

.flex-grow-* 유틸리티로 플렉스 아이템이 사용 가능한 공간을 채우도록 커지는 정도를 전환합니다. 아래 예시에서 .flex-grow-1 요소는 가능한 모든 공간을 사용하면서, 나머지 두 플렉스 아이템에는 필요한 공간을 남겨둡니다.

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

.flex-shrink-* 유틸리티로 플렉스 아이템이 필요할 때 줄어드는 정도를 전환합니다. 아래 예시에서 .flex-shrink-1이 적용된 두 번째 플렉스 아이템은 내용이 새 줄로 줄바꿈되도록 강제되어, 이전 .w-100 플렉스 아이템에 더 많은 공간을 허용하도록 "줄어듭니다".

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

flex-grow와 flex-shrink의 반응형 변형도 존재합니다(.flex-{grow|shrink}-0, .flex-{grow|shrink}-1 및 각 브레이크포인트 접두어 변형).

자동 margin (Auto margins)

flexbox는 플렉스 정렬과 auto margin을 섞으면 몹시 멋진 일을 할 수 있습니다. 아래는 auto margin으로 플렉스 아이템을 제어하는 세 가지 예시입니다: 기본(자동 margin 없음), 두 아이템을 오른쪽으로 밀기(.me-auto), 두 아이템을 왼쪽으로 밀기(.ms-auto).

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

align-items와 함께 (With align-items)

align-items, flex-direction: column, margin-top: auto 또는 margin-bottom: auto를 섞어 하나의 플렉스 아이템을 컨테이너의 위나 아래로 세로 이동시킵니다.

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

줄바꿈 (Wrap)

플렉스 컨테이너에서 플렉스 아이템이 줄바꿈되는 방식을 바꿉니다. 전혀 줄바꿈하지 않기(브라우저 기본값)는 .flex-nowrap, 줄바꿈은 .flex-wrap, 역방향 줄바꿈은 .flex-wrap-reverse 중에서 선택하세요.

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<div class="d-flex flex-wrap-reverse">
  ...
</div>

flex-wrap의 반응형 변형도 존재합니다(.flex-nowrap, .flex-wrap, .flex-wrap-reverse 및 각 브레이크포인트 접두어 변형).

순서 (Order)

몇 가지 order 유틸리티로 특정 플렉스 아이템의 시각적 순서를 바꿉니다. 우리는 아이템을 first나 last로 만드는 옵션과 DOM 순서를 사용하는 재설정 옵션만 제공합니다. order는 0에서 5까지의 정수 값을 받으므로, 추가 값이 필요하면 사용자 정의 CSS를 추가하세요.

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

order의 반응형 변형도 존재합니다(.order-0부터 .order-5까지 및 각 브레이크포인트 접두어 변형).

또한 요소에 각각 order: -1과 order: 6을 적용해 순서를 바꾸는 반응형 .order-first와 .order-last 클래스도 있습니다.

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

콘텐츠 정렬 (Align content)

flexbox 컨테이너에 align-content 유틸리티를 사용해 교차축을 따라 플렉스 아이템을 함께 정렬합니다. start(브라우저 기본값), end, center, between, around, stretch 중에서 선택하세요. 이 유틸리티를 보여주기 위해 flex-wrap: wrap을 적용하고 플렉스 아이템 수를 늘렸습니다.

주의! 이 프로퍼티는 플렉스 아이템의 단일 행에는 효과가 없습니다.

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<div class="d-flex align-content-stretch flex-wrap">...</div>

align-content의 반응형 변형도 존재합니다(각 값에 .align-content-sm-, .align-content-md-, .align-content-lg-, .align-content-xl-, .align-content-xxl-* 접두어 변형).

미디어 객체 (Media object)

Bootstrap 4의 미디어 객체 컴포넌트를 재현하고 싶나요? 이전보다 더 유연하고 사용자 정의가 가능한 몇 가지 flex 유틸리티로 금방 다시 만들 수 있습니다.

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

그리고 이미지 옆의 콘텐츠를 세로로 가운데 정렬하고 싶다면:

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

CSS

Sass utilities API

flexbox 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"flex": (
  responsive: true,
  property: flex,
  values: (fill: 1 1 auto)
),
"flex-direction": (
  responsive: true,
  property: flex-direction,
  class: flex,
  values: row column row-reverse column-reverse
),
"flex-grow": (
  responsive: true,
  property: flex-grow,
  class: flex,
  values: (
    grow-0: 0,
    grow-1: 1,
  )
),
"flex-shrink": (
  responsive: true,
  property: flex-shrink,
  class: flex,
  values: (
    shrink-0: 0,
    shrink-1: 1,
  )
),
"flex-wrap": (
  responsive: true,
  property: flex-wrap,
  class: flex,
  values: wrap nowrap wrap-reverse
),
"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
),
"align-items": (
  responsive: true,
  property: align-items,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"align-content": (
  responsive: true,
  property: align-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
  )
),
"align-self": (
  responsive: true,
  property: align-self,
  values: (
    auto: auto,
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"order": (
  responsive: true,
  property: order,
  values: (
    first: -1,
    0: 0,
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    last: 6,
  ),
),

더 알아보기 (Learn more)

• Bootstrap 문서