CSS Flexbox
- 이전 페이지 CSS Box Sizing
- 다음 페이지 CSS 미디어 쿼리
CSS Flexbox 레이아웃 모듈
Flexbox 레이아웃 모듈이 등장하기 전에 사용할 수 있는 레이아웃 모드는 다음과 같은 네 가지입니다:
- 블록(Block), 웹 페이지의 일부(섹션)를 위한 블록
- 인라인(Inline), 텍스트를 위한 인라인
- 테이블, 양차원 테이블 데이터를 위한 테이블
- 정위치, 요소의 명확한 위치를 정의하는 데 사용됩니다
플렉스박스 레이아웃 모듈은 플로팅이나 정위치를 사용하지 않고 유연한 반응형 레이아웃 구조를 더 쉽게 설계할 수 있는 모듈입니다.
브라우저 지원
모든 최신 브라우저가 지원합니다 flexbox 속성.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox 요소
Flexbox 모델을 사용하기 시작하려면 먼저 Flex 컨테이너를 정의해야 합니다.
上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。
예제
위의 요소는 세 flex 아이템을 가진 flex 컨테이너(파란 영역)을 나타냅니다。
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
이 세 flex 아이템을 포함한 flex 컨테이너가 있습니다：
부모 요소(컨테이너)를 통해 display 속성이 설정됩니다 flexflex 컨테이너는 확장 가능합니다：
예제
.flex-container {
display: flex;
}
아래는 flex 컨테이너 속성입니다：
flex-direction 속성
flex-direction 속성은 컨테이너가 flex 아이템을哪个方向上堆叠를 정의합니다。
예제
column 값은 flex 아이템을 수직으로 쌓아 올립니다(위에서 아래로)：
.flex-container {
display: flex;
flex-direction: column;
}
예제
column-reverse 값은 flex 아이템을 수직으로 쌓아 올립니다(아래에서 위로)：
.flex-container {
display: flex;
flex-direction: column-reverse;
}
예제
row 값은 flex 아이템을 수평으로 쌓아 올립니다(왼쪽에서 오른쪽으로)：
.flex-container {
display: flex;
flex-direction: row;
}
예제
row-reverse 값은 flex 아이템을 수평으로 쌓아 올립니다(오른쪽에서 왼쪽으로)：
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 속성
flex-wrap 속성은 flex 아이템에 줄을 바꿀지 여부를 정의합니다。
아래의 예제는 flex-wrap 속성을 더 잘 설명하기 위해 12개의 flex 아이템을 포함하고 있습니다。
예제
wrap 값은 필요한 경우, flex 아이템에 줄을 바꿀 것을 정의합니다：
.flex-container {
display: flex;
flex-wrap: wrap;
}
예제
nowrap 값은 flex 아이템에 줄을 바꿀 것이 없도록 정의합니다(기본 설정)：
.flex-container {
display: flex;
flex-wrap: nowrap;
}
예제
wrap-reverse 값은 필요한 경우, 확장 아이템이 반대 순서로 줄을 바꿀 것을 정의합니다：
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 속성
flex-flow 속성은 flex-direction과 flex-wrap 속성을 동시에 설정하는 간결한 속성입니다。
예제
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content 속성
justify-content 속성은 flex 아이템을 정렬하는 데 사용됩니다：
예제
center 값은 flex 아이템을 컨테이너의 중앙에 정렬합니다：
.flex-container {
display: flex;
justify-content: center;
}
예제
flex-start 값은 flex 아이템을 컨테이너의 시작에 정렬합니다(기본 설정)：
.flex-container {
display: flex;
justify-content: flex-start;
}
예제
flex-end 값은 flex 아이템을 컨테이너의 끝에 정렬합니다：
.flex-container {
display: flex;
justify-content: flex-end;
}
예제
space-around 값은 행 전, 사이, 후에 공간이 있는 flex 아이템을 표시합니다：
.flex-container {
display: flex;
justify-content: space-around;
}
예제
space-between 값은 행 사이에 공간이 있는 flex 아이템을 표시합니다：
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 속성
align-items 속성은 flex 아이템을 가로로 정렬하는 데 사용됩니다.
이 예제에서는 200픽셀 높이의 컨테이너를 사용하여 align-items 속성을 더 잘 설명하려고 합니다.
예제
center 값은 flex 항목을 컨테이너의 중간에 정렬합니다:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
예제
flex-start 값은 flex 항목을 컨테이너의 상단에 정렬합니다:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
예제
flex-end 값은 유연한 항목을 컨테이너의 하단에 정렬합니다:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
예제
stretch 값은 flex 항목을 확장하여 컨테이너를 채웁니다(기본값):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
예제
baseline 값은 flex 항목의 기준선을 정렬합니다:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
주의:이 예제에서는 다른 font-size를 사용하여 항목이 텍스트 기준선에 맞춰 정렬되었음을 보여줍니다:
align-content 속성
align-content 속성은 유연한 라인을 정렬하는 데 사용됩니다.
이 예제에서, 우리는 600 픽셀 높이의 컨테이너를 사용하고 flex-wrap 속성을 wrap으로 설정하여 align-content 속성을 더 잘 보여줍니다.
예제
space-between 값은 유연한 라인 사이에 같은 간격을 두고 표시합니다:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
예제
space-around 값은 유연한 라인을 전, 중, 후에 간격을 두고 표시합니다:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
예제
stretch 값은 유연한 라인을 확장하여 남은 공간을 차지합니다(기본값):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
예제
center 값은 컨테이너의 중간에 유연한 라인을 표시합니다:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
예제
flex-start 값은 컨테이너의 시작에 유연한 라인을 표시합니다:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
예제
flex-end 값은 컨테이너의 끝에 유연한 라인을 표시합니다:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
완벽한 중앙 정렬
다음 예제에서, 우리는 매우 일반적인 스타일링 문제를 해결할 것입니다: 완벽한 중앙 정렬.
해결책: 다음과 같이 설정합니다: justify-content 와 align-items 속성을 중앙에 설정하면 flex 항목이 완벽하게 중앙에 정렬됩니다:
예제
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
자식 요소(항목)
flex 컨테이너의 직접 자식 요소는 자동으로 유연한(flex) 항목이 됩니다.
위의 요소는 회색 유연한 컨테이너 내 네 개의 파란색 유연한 항목을 나타냅니다。
예제
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
유연한 항목에 사용할 수 있는 속성은 다음과 같습니다：
orderflex-growflex-shrinkflex-basisflexalign-self
order 속성
order 속성은 flex 항목의 순서를 정의합니다.
코드의 첫 번째 flex 항목은 레이아웃에서 최초 항목으로 표시되지 않아도 됩니다.
order 값은 수치여야하며 기본 값은 0입니다.
예제
order 속성은 flex 항목의 순서를 변경할 수 있습니다：
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow 속성
flex-grow 속성은 특정 flex 항목이 나머지 flex 항목에 비해 얼마나 증가될 것인지 정의합니다.
이 값은 수치여야하며 기본 값은 0입니다.
예제
세 번째 유연한 항목의 증가 속도가 다른 유연한 항목보다 8배 빠르게 설정합니다：
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
flex-shrink 속성
flex-shrink 속성은 특정 flex 항목이 나머지 flex 항목에 비해 얼마나 축소될 것인지 정의합니다.
이 값은 수치여야하며 기본 값은 0입니다.
예제
세 번째 유연한 항목이 다른 유연한 항목과 같은 정도로 축소되지 않도록 합니다：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex-basis 속성
flex-basis 속성은 flex 항목의 초기 길이를 정의합니다.
예제
세 번째 유연한 항목의 초기 길이를 200픽셀로 설정합니다：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
flex 속성
flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 약자 속성입니다.
예제
세 번째 유연한 항목을 증가시키지 않고(0), 축소시키지 않고(0)，초기 길이를 200픽셀로 설정합니다：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
align-self 속성
align-self 속성은弹性 컨테이너 내 선택된 항목의 정렬 방식을 정의합니다.
align-self 속성은 컨테이너의 align-items 속성에 설정된 기본 정렬 방식을 덮습니다.
이 예제에서는 align-self 속성을 더 잘 보여주기 위해 200픽셀 높이의 컨테이너를 사용했습니다：
예제
세 번째 활성 항목을 컨테이너 중앙에 정렬합니다：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div>
예제
두 번째 활성 항목을 컨테이너 상단에 정렬하고, 세 번째 활성 항목을 컨테이너 하단에 정렬합니다：
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
Flexbox을 사용한 반응형 이미지 라이브러리
flexbox를 사용하여 반응형 이미지 라이브러리를 만들어, 스크린 크기에 따라 네 개, 두 개 또는 전체 너비 이미지 사이에서 변환됩니다：
CSS Flexbox 속성
아래 표는 flexbox와 함께 사용되는 CSS 속성을 나열합니다：
| 속성 | 설명 |
|---|---|
| display | HTML 요소에 사용되는 박스 타입을 정의합니다. |
| flex-direction | 활성 컨테이너 내 활성 항목의 방향을 정의합니다. |
| justify-content | 활성 항목이 주 축상의 모든 사용 가능한 공간을 사용하지 않을 때, 이 항목들을 세로로 정렬합니다. |
| align-items | 활성 항목이 주 축상의 모든 사용 가능한 공간을 사용하지 않을 때, 이 항목들을 가로로 정렬합니다. |
| flex-wrap | 활성 항목이 한 개의 flex 라인에 적재할 수 있는 공간이 없을 때, 활성 항목이 줄어들어야 하는지 정의합니다. |
| align-content | flex-wrap 속성의 행동을 수정합니다. align-items와 유사하지만, 활성 항목을 정렬하지 않고 flex 라인을 정렬합니다. |
| flex-flow | flex-direction 및 flex-wrap의 줄임말 속성. |
| order | 활성 항목이 같은 컨테이너 내 나머지 활성 항목에 대한 순서를 정의합니다. |
| align-self | 활성 항목에 사용됩니다. 컨테이너의 align-items 속성을 덮습니다. |
| flex | flex-grow、flex-shrink 및 flex-basis 속성의 줄임말 속성. |
- 이전 페이지 CSS Box Sizing
- 다음 페이지 CSS 미디어 쿼리
