Source

몸을 풀다

반응형 flexbox 유틸리티의 전체 제품군을 사용하여 그리드 열, 탐색, 구성 요소 등의 레이아웃, 정렬 및 크기 조정을 신속하게 관리합니다. 더 복잡한 구현의 경우 사용자 정의 CSS가 필요할 수 있습니다.

플렉스 동작 활성화

유틸리티를 적용 display하여 flexbox 컨테이너를 만들고 직접 자식 요소 를 플렉스 항목으로 변환합니다. Flex 컨테이너 및 항목은 추가 flex 속성으로 추가로 수정할 수 있습니다.

나는 플렉스박스 컨테이너다!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
나는 인라인 flexbox 컨테이너입니다!
<div class="d-inline-flex p-2 bd-highlight">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

방향

방향 유틸리티를 사용하여 플렉스 컨테이너에서 플렉스 항목의 방향을 설정합니다. 대부분의 경우 브라우저 기본값이 이므로 수평 클래스를 생략할 수 있습니다 row. 그러나 이 값을 명시적으로 설정해야 하는 상황이 발생할 수 있습니다(예: 반응형 레이아웃).

.flex-row수평 방향(브라우저 기본값)을 설정하거나 .flex-row-reverse반대쪽에서 수평 방향을 시작하는 데 사용 합니다.

플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-column수직 방향을 설정하거나 .flex-column-reverse반대쪽에서 수직 방향을 시작할 때 사용 합니다.

플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
플렉스 아이템 1
플렉스 아이템 2
플렉스 아이템 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

에 대한 반응 변형도 존재합니다 flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

콘텐츠 정당화

flexbox 컨테이너의 유틸리티를 사용 justify-content하여 기본 축(시작할 x축, 인 경우 y축 flex-direction: column)에서 플렉스 항목의 정렬을 변경합니다. start(브라우저 기본값), end, center, between또는 에서 선택합니다 around.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<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>

에 대한 반응 변형도 존재합니다 justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

항목 정렬

flexbox 컨테이너의 유틸리티를 사용 align-items하여 교차 축(시작할 y축, 이면 x축 flex-direction: column)에서 플렉스 항목의 정렬을 변경합니다. 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-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

자기 정렬

flexbox 항목의 유틸리티를 사용 align-self하여 교차 축(시작할 y축, 이면 x축 flex-direction: column)의 정렬을 개별적으로 변경합니다. , , , 또는 (브라우저 기본값) 과 동일한 옵션에서 선택합니다 align-items.startendcenterbaselinestretch

플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
플렉스 아이템
정렬된 플렉스 항목
플렉스 아이템
<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-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

채우다

사용 .flex-fill가능한 모든 수평 공간을 차지하는 동안 일련의 형제 요소에 클래스를 사용하여 동일한 너비로 강제 적용합니다. 동일한 너비 또는 양쪽 맞춤 탐색에 특히 유용합니다.

플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

에 대한 반응 변형도 존재합니다 flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

성장 및 축소

유틸리티를 사용 .flex-grow-*하여 사용 가능한 공간을 채우기 위해 확장할 수 있는 플렉스 항목의 기능을 토글합니다. 아래 예에서 .flex-grow-1요소는 사용 가능한 모든 공간을 사용하고 나머지 두 개의 플렉스 항목에 필요한 공간을 허용합니다.

플렉스 아이템
플렉스 아이템
세 번째 플렉스 아이템
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

유틸리티를 사용 .flex-shrink-*하여 필요한 경우 축소할 수 있는 플렉스 항목의 기능을 토글합니다. 아래 예에서 가 있는 두 번째 플렉스 항목 .flex-shrink-1은 내용을 새 줄로 감싼 다음 "축소"하여 이전 플렉스 항목에 더 많은 공간을 허용합니다 .w-100.

플렉스 아이템
플렉스 아이템
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

flex-grow및 에 대한 반응 변형도 존재합니다 flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

자동 여백

Flexbox는 플렉스 정렬과 자동 여백을 혼합할 때 꽤 멋진 일을 할 수 있습니다. 다음은 자동 여백을 통해 플렉스 항목을 제어하는 ​​세 가지 예입니다. 기본값(자동 여백 없음), 두 항목을 오른쪽으로 .mr-auto푸시( ), 두 항목을 왼쪽으로 푸시( .ml-auto).

불행히도 IE10 및 IE11은 부모가 기본값이 아닌 justify-content값을 갖는 플렉스 항목에서 자동 여백을 제대로 지원하지 않습니다. 자세한 내용은 이 StackOverflow 답변 을 참조하세요.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

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

정렬 항목으로

align-items, flex-direction: columnmargin-top: auto또는 를 혼합하여 하나의 플렉스 항목을 컨테이너의 상단 또는 하단으로 수직으로 이동합니다 margin-bottom: auto.

플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
플렉스 아이템
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

포장하다

플렉스 항목이 플렉스 컨테이너에서 래핑되는 방식을 변경합니다. 로 래핑을 하지 않음(브라우저 기본값) .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
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

주문하다

소수의 유틸리티 를 사용하여 특정 플렉스 항목 의 시각적 순서를 변경합니다 . order항목을 처음 또는 마지막으로 만드는 옵션과 DOM 순서를 사용하도록 재설정하는 옵션만 제공합니다. order정수 값(예: ) 5을 사용하므로 필요한 추가 값에 대해 사용자 정의 CSS를 추가하십시오.

첫 번째 플렉스 항목
두 번째 플렉스 항목
세 번째 플렉스 아이템
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

에 대한 반응 변형도 존재합니다 order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

콘텐츠 정렬

align-contentflexbox 컨테이너의 유틸리티를 사용 하여 교차 축에서 플렉스 항목 을 함께 정렬합니다. 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-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch