CSS 플렉스 컨테이너
상위 요소(컨테이너)
이전 장에서 지정한 것처럼 이것은 세 개의 플렉스 항목 이 있는 플렉스 컨테이너 (파란색 영역)입니다 .
1
2
삼
display속성을
flex다음과 같이 설정하면 플렉스 컨테이너가 유연해집니다 .
예시
.flex-container {
display: flex;
}
플렉스 컨테이너 속성은 다음과 같습니다.
플렉스 방향 속성
속성 은 flex-direction컨테이너가 플렉스 항목을 스택하려는 방향을 정의합니다.
1
2
삼
예시
값 은 column플렉스 항목을 수직으로(위에서 아래로) 쌓습니다.
.flex-container {
display: flex;
flex-direction: column;
}
예시
값 은 column-reverse플렉스 아이템을 수직으로 쌓습니다(그러나 아래에서 위로):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
예시
값 은 row플렉스 항목을 가로로(왼쪽에서 오른쪽으로) 쌓습니다.
.flex-container {
display: flex;
flex-direction: row;
}
예시
값 은 row-reverse플렉스 항목을 가로로(그러나 오른쪽에서 왼쪽으로) 쌓습니다.
.flex-container {
display: flex;
flex-direction: row-reverse;
}
플렉스 랩 속성
속성 은 flex-wrap플렉스 항목을 래핑할지 여부를 지정합니다.
아래 예제에는
flex-wrap속성을 더 잘 보여주기 위해 12개의 플렉스 항목이 있습니다.
1
2
삼
4
5
6
7
8
9
10
11
12
예시
wrap값은 필요한 경우 플렉스 항목이 래핑되도록 지정합니다 .
.flex-container {
display: flex;
flex-wrap: wrap;
}
예시
nowrap값은 플렉스 항목이 래핑되지 않도록 지정합니다(기본값) .
.flex-container {
display: flex;
flex-wrap: nowrap;
}
예시
값 은 wrap-reverse유연한 항목이 필요한 경우 역순으로 래핑되도록 지정합니다.
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 속성
속성은 및 속성 을
flex-flow모두 설정하기 위한 약식 속성입니다 .
flex-directionflex-wrap
예시
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content 속성
justify-content속성은 플렉스 항목을 정렬하는 데 사용됩니다 .
1
2
삼
예시
값 은 center컨테이너 중앙에 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
justify-content: center;
}
예시
값 은 flex-start컨테이너 시작 부분에 플렉스 항목을 정렬합니다(기본값).
.flex-container {
display: flex;
justify-content: flex-start;
}
예시
값 은 flex-end컨테이너 끝에 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
justify-content: flex-end;
}
예시
space-around값은 줄 앞, 사이, 뒤에 공백이 있는 플렉스 항목을 표시합니다 .
.flex-container {
display: flex;
justify-content: space-around;
}
예시
값은 줄 사이에 공백 이 space-between있는 플렉스 항목을 표시합니다.
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 속성
align-items속성은 플렉스 항목을 정렬하는 데 사용됩니다 .
1
2
삼
이 예에서는
align-items속성을 더 잘 보여주기 위해 200픽셀 높이의 컨테이너를 사용합니다.
예시
값 은 center컨테이너 중간에 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
예시
값 은 flex-start컨테이너 맨 위에 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
예시
값 은 flex-end컨테이너 맨 아래에 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
예시
값 은 stretch플렉스 항목을 확장하여 컨테이너를 채웁니다(기본값).
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
예시
값 은 baseline기준선과 같은 플렉스 항목을 정렬합니다.
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
참고: 이 예제에서는 다른 글꼴 크기를 사용하여 항목이 텍스트 기준선에 따라 정렬되는 것을 보여줍니다.
1
2
3
align-content 속성
이 align-content속성은 플렉스 라인을 정렬하는 데 사용됩니다.
1
2
삼
4
5
6
7
8
9
10
11
12
이 예에서는 속성 을 더 잘 보여주기 위해 속성이 로
flex-wrap설정된 600픽셀 높이의 컨테이너를 사용합니다 .wrapalign-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속성을
모두 로 설정 center하면 플렉스 항목이 완벽하게 중앙에 배치됩니다.
예시
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
CSS Flexbox 컨테이너 속성
다음 표에는 모든 CSS Flexbox 컨테이너 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |