English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 를 통해 flex 클래스를 사용하여 페이지 레이아웃을 제어합니다.
Bootstrap 3 와의 차이점은 Bootstrap 4 와의 가장 큰 차이점은 Bootstrap 4 를 사용하여 레이아웃을 구성하는 대신, 플로팅을 사용합니다.
弹性盒子는 CSS3 의 새로운 레이아웃 모드로, 반응형 디자인에 더 적합합니다. flex를 아직 모르시면, 우리의 CSS3 弹性盒子(Flex Box) 教程
주의: IE9 그리고 이하 버전은 유연한 박스를 지원하지 않기 때문에 IE와의 호환성을 필요로 하면8-9를 사용해야 합니다. 3。
다음 예제에서는 d-flex 클래스를 사용하여 유연한 박스 컨테이너를 생성하고 세 개의 유연한 자식 요소를 설정합니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>Flex</2 <p>유연한 박스를 사용하여 표시할 수 있습니다. d-flex 클래스를 사용하여 유연한 박스 컨테이너를 생성하고 세 개의 유연한 자식 요소를 설정합니다：</ -flex p-3 bg-secondary text-white"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
유연한 박스를 동일한 행에 표시할 수 있는 컨테이너를 생성할 수 있습니다. d-inline-flex 클래스:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>inline Flex</2 <p>유연한 박스를 동일한 행에 표시할 수 있는 컨테이너를 생성할 수 있습니다. d-inline-flex 클래스:</ -inline-flex p-3 bg-secondary text-white"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
.flex-row은 유연한 자식 요소를 가로 방향으로 표시할 수 있으며, 기본 설정입니다.
.flex를 사용하여--reverse 클래스는 오른쪽 정렬을 설정하는 데 사용되며, .flex와 같습니다.-row 방향을 반대로 설정합니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>세로 방향</2 <p>유연한 박스를 사용하여 표시할 수 있습니다. .flex-row 클래스는 유연한 자식 요소를 세로 방향으로 표시하기 위해 사용됩니다. </ -flex flex-row bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / <p>.flex--reverse를 사용하여 오른쪽 정렬 방향 설정:</ -flex flex--reverse bg-secondary"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
.flex-column 클래스는 유연한 자식 요소를 가로 방향으로 표시하기 위해 사용됩니다. .flex--reverse는 자식 요소를 반전시킵니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>수직 방향</2 <p>.flex-column 클래스는 유연한 자식 요소를 수직 방향으로 표시하는 데 사용됩니다：</ -flex flex-column mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / <p>.flex--reverse 클래스는 유연한 자식 요소를 수직 방향으로 반전 표시하는 데 사용됩니다：</ -flex flex--reverse"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
-content-* 클래스는 유연한 자식 요소의 배치 방식을 변경하는 데 사용됩니다.* 허용 가능한 값은 다음과 같습니다:start (기본값), end, center, between 또는 around:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>콘텐츠 배치 방식</2 <p> .justify-content-* 클래스는 유연한 자식 요소의 배치 방식을 변경하는 데 사용됩니다.* 허용 가능한 값은 다음과 같습니다: start (기본값), end, center, between 또는 around:</ -flex justify-content-start bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / -flex justify-content-end bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / -flex justify-content-center bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / -flex justify-content-between bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / -flex justify-content-around bg-secondary mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
.flex-fill 클래스는 모든 유연한 자식 요소의 너비를 강제로 같게 설정합니다:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>평행</2 <p>.flex-fill 클래스는 모든 유연한 자식 요소의 너비를 강제로 같게 설정합니다:</ -flex mb-3 -2 -fill bg-info">Flex item 1/ -2 -fill bg-warning">Flex item 2/ -2 -fill bg-primary">Flex item 3/ / <p> .flex를 사용하지 않습니다-fill 클래스 예제:</ -flex mb-3 bg-secondary"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
.flex-grow-1 자식 요소가 남은 공간을 사용하도록 설정하는 데 사용됩니다. 다음 예제에서 전체 두 번째 자식 요소는 필요한 공간만 설정했으며 마지막 자식 요소는 남은 공간을 가져옵니다. :
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>확장</2 <p>.flex-grow-1 자식 요소가 남은 공간을 사용하도록 설정하는 데 사용됩니다：</ -flex mb-3 -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 -grow-1 bg-primary">Flex item 3/ / <p> .flex를 사용하지 않습니다-grow-1 예제:</ -flex mb-3 bg-secondary"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
주의사항: .flex를 사용하여-shrink-1 자식 요소의 축소 규칙을 설정하는 데 사용됩니다。
.order 클래스는 유연한 자식 요소의 정렬을 설정할 수 있습니다. .order-1 까지 .order-12， 숫자가 낮을수록 중요도가 높습니다( .order-1 .order에 배치됩니다-2 이전) :
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>정렬</2 <p>.order 클래스는 유연한 자식 요소의 정렬을 설정할 수 있습니다. .order-1 까지 .order-12， 숫자가 낮을수록 중요도가 높습니다:</ -flex mb-3 -2 order-3 bg-info">Flex item 1/ -2 order-2 bg-warning">Flex item 2/ -2 order-1 bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
.mr-auto 클래스는 자식 요소의 오른쪽 외경을 설정할 수 있습니다 auto، 즉 margin-right: auto!important;，.ml-auto 클래스는 자식 요소의 왼쪽 외경을 설정할 수 있습니다 auto، 즉 margin-left: auto!important;:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>외경</2 <p>.mr-auto 클래스는 자식 요소의 오른쪽 외경을 auto로 설정할 수 있습니다. .ml-auto 클래스는 자식 요소의 왼쪽 외경을 auto로 설정할 수 있습니다.</ -flex mb-3 bg-secondary"> -2 mr-auto bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 bg-primary">Flex item 3/ / -flex mb-3 bg-secondary"> -2 bg-info">Flex item 1/ -2 bg-warning">Flex item 2/ -2 ml-auto bg-primary">Flex item 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
활성 컨테이너에 포함된 자식 요소는 다음 세 가지 클래스를 사용할 수 있습니다: .flex-nowrap (기본), .flex-wrap 또는 .flex-wrap-reverse. flex 컨테이너를 단一行이거나 다중 행으로 설정합니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>포함</2 <p>유연한 컨테이너에 유연한 자식 요소를 포함하려면 다음 세 가지 클래스를 사용할 수 있습니다.: .flex-nowrap (기본), .flex-wrap 또는 .flex-wrap-reverse:</ <p><code>.flex-wrap:</code></ -flex flex-wrap bg-light"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / <p><code>.flex-wrap-reverse:</code></ -flex flex-wrap-reverse bg-light"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / <p><code>.flex-nowrap:</code></ -flex flex-nowrap bg-light"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ -2 26/ -2 27/ -2 28/ -2 29/ -2 30</ -2 31/ -2 32/ -2 33/ -2 34/ -2 35/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
align를 사용할 수 있습니다.-content-* 자식 요소가 수직 방향으로 쌓이는 방식을 제어합니다. 포함된 값은: .align-content-start (기본), .align-content-end, .align-content-center, .align-content-between, .align-content-around 및 .align-content-stretch
이 클래스는 단一行의 유연한 자식 요소에서는 유효하지 않습니다。
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>내용 정렬</2 <p>align를 사용할 수 있습니다.-content-* 자식 요소가 수직 방향으로 정렬되는 방식을 제어합니다./ <p><strong>주의:</<strong>이 예제는 소형 장치에서 효과가 좋지 않습니다. 이 클래스는 단一行의 유연한 자식 요소에서는 유효하지 않습니다.</ -content-start (기본):</ -flex flex-wrap align-content-start bg-300px"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / -content-/ -flex flex-wrap align-content-end bg-300px"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / -content-/ -flex flex-wrap align-content-center bg-300px"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / -content-around:</ -flex flex-wrap align-content-around bg-300px"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / -content-stretch:</ -flex flex-wrap align-content-stretch bg-300px"> -2 1/ -2 2/ -2 3/ -2 4/ -2 5/ -2 6/ -2 7/ -2 8/ -2 9/ -2 10/ -2 11/ -2 12/ -2 13 / -2 14/ -2 15/ -2 16/ -2 17/ -2 18/ -2 19/ -2 20</ -2 21/ -2 22/ -2 23/ -2 24/ -2 25/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
단一行의 자식 요소를 정렬하려면 .align를 사용할 수 있습니다.-items-* 클래스로 제어하여 포함된 값은:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 및 .align-items-stretch (기본)。
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2>자식 요소 정렬</2 <p>단一行의 자식 요소를 정렬하려면 .align를 사용할 수 있습니다.-content-* / -items-/ -flex align-items-start bg-15 -2 1/ -2 2/ -2 3/ / -items-/ -flex align-items-end bg-15 -2 1/ -2 2/ -2 3/ / -items-/ -flex align-items-center bg-15 -2 1/ -2 2/ -2 3/ / -items-/ -flex align-items-baseline bg-15 -2 1/ -2 2/ -2 3/ / -items-/ -flex align-items-stretch bg-15 -2 1/ -2 2/ -2 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
지정된 자식 요소를 정렬하려면 .align를 사용할 수 있습니다.-self-* 클래스로 제어하여 포함된 값은: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 및 .align-self-stretch (기본)
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8 <meta name="viewport" content="width=device-width, 초기-1 ///-/431// ////321// ////115/// ///-/431/// / -3 2/2 -self-* / -self-/ --15 -2 1/ -2 -self- 2/ -2 3/ / -self-/ --15 -2 1/ -2 -self- 2/ -2 3/ / -self-/ --15 -2 1/ -2 -self- 2/ -2 3/ / -self-/ --15 -2 1/ -2 -self- 2/ -2 3/ / -self-/ --15 -2 1/ -2 -self- 2/ -2 3/ / / / /테스트를 해보세요 ‹/
실행 후 결과는 다음과 같습니다:
다른 장치에 따라 flex 클래스를 설정하여 페이지 반응형 레이아웃을 구현할 수 있습니다. 다음 테이블에서는 * 가능한 값은 sm, md, lg 또는 xl로, 각각 소형 장치, 중형 장치, 대형 장치, 초대형 장치에 해당합니다.
| 클래스 | 예제 | 구현 |
|---|---|---|
| 유연한 컨테이너 | ||
| -*- | 다른 스크린 장치에 따라 유연한 박스 컨테이너를 생성합니다 | 시도해 보세요 |
| 방향 | ||
| .flex-*- | 다른 스크린 장치에 따라 수평 방향으로 유연한 자식 요소를 표시합니다 | 시도해 보세요 |
| .flex-*- | 다른 스크린 장치에 따라 수직 방향으로 유연한 자식 요소를 표시합니다 | 시도해 보세요 |
| 내용 정렬 | ||
| -content-*-start | 다른 스크린 장치에 따라 시작 위치에서 유연한 자식 요소를 표시합니다 (왼쪽 정렬) | 시도해 보세요 |
| -content-*-center | 다른 스크린 장치에 따라 flex 컨테이너 내에서 자식 요소를 가운데 표시합니다 | 시도해 보세요 |
| -content-*-around | 다른 스크린 장치에 따라 "around"를 사용하여 유연한 자식 요소를 표시합니다 | 시도해 보세요 |
| 확장 | ||
| .flex-*-grow-0 | 다른 스크린 장치는 확장을 설정하지 않습니다 | |
| .flex-*-grow-1 | 다른 화면 장치에 따라 확장을 설정합니다 | |
| 축소 | ||
| .flex-*-shrink-0 | 다른 화면 장치에 따라 축소를 설정하지 않습니다 | |
| .flex-*-shrink-1 | 다른 화면 장치에 따라 축소를 설정합니다 | |
| 포장 | ||
| .flex-*-nowrap | 다른 화면 장치에 따라 포장 요소를 설정하지 않습니다 | 시도해 보세요 |
| .flex-*-wrap-reverse | 다른 화면 장치에 따라 포장 요소를 반전합니다 | 시도해 보세요 |
| .align-content-*-end | 다른 화면 장치에 따라 끝 위치에 요소를 쌓습니다 | 시도해 보세요 |
| .align-content-*-around | 다른 화면 장치에 따라 "around"을 사용하여 요소를 쌓습니다 | 시도해 보세요 |
| 요소 정렬 | ||
| .align-items-*-start | 다른 화면 장치에 따라 요소를 상단에 표시하여 같은 줄에 표시합니다. | 시도해 보세요 |
| .align-items-*-center | 다른 화면 장치에 따라 요소를 중앙에 표시하여 같은 줄에 표시합니다. | 시도해 보세요 |
| .align-items-*-stretch | 다른 화면 장치에 따라 요소를 높이 확장하여 같은 줄에 표시합니다. | 시도해 보세요 |
| .align-self-*-end | 다른 화면 장치에 따라 단일 자식 요소를 끝 부분에 표시합니다 | 시도해 보세요 |
| .align-self-*-baseline | 다른 화면 장치에 따라 단일 자식 요소를 기본 라인 위치에 표시합니다 | 시도해 보세요 |