display: flex; CSS 속성은 Flexbox 레이아웃을 생성하기 위해 사용됩니다. Flexbox는 요소들을 부모 컨테이너 내에서 유연하게 배치하고 정렬하는데 사용되며, 웹 페이지의 레이아웃을 더 효율적으로 조작할 수 있도록 해줍니다.
display: flex; 속성을 부모 요소에 적용하면 그 부모 요소는 Flex Container(플렉스 컨테이너)로 정의되며, 그 안에 포함된 자식 요소들은 Flex Items(플렉스 아이템)로 정의됩니다.
일반적인 사용 사례와 주요 속성:
1. Flex Direction (플렉스 방향):
flex-direction: Flex Container 내에서 아이템들이 배치되는 방향을 설정합니다. 주로row(기본값),column,row-reverse,column-reverse중 하나로 설정됩니다.
기본적인 Flex 방향 설정:
.container {
display: flex;
flex-direction: row;
/* 기본값: 아이템들이 왼쪽에서 오른쪽으로
행 방향으로 배치됩니다. */
}행 반전 (Row Reverse):
.container {
display: flex;
flex-direction: row-reverse;
/* 아이템들이 오른쪽에서 왼쪽으로
행 반전 방향으로 배치됩니다. */
}열 방향 (Column Direction):
.container {
display: flex;
flex-direction: column;
/* 아이템들이 위에서 아래로 열 방향으로
배치됩니다. */
}열 반전 (Column Reverse):
.container {
display: flex;
flex-direction: column-reverse;
/* 아이템들이 아래서 위로 열 반전
방향으로 배치됩니다. */
}2. Justify Content (주요 컨텐츠 정렬):
justify-content: 아이템들을 수평 방향으로 정렬합니다.flex-start,flex-end,center,space-between,space-around,space-evenly등의 값으로 설정 가능합니다.
기본 값 (Default Value: flex-start):
.container {
display: flex;
justify-content: flex-start;
/* 아이템들이 가장 왼쪽에 정렬됩니다. */
}가운데 정렬:
.container {
display: flex;
justify-content: center;
/* 아이템들이 수평 방향으로 가운데 정렬됩니다. */
}오른쪽 정렬:
.container {
display: flex;
justify-content: flex-end;
/* 아이템들이 가장 오른쪽에 정렬됩니다. */
}공간 분배:
.container {
display: flex;
justify-content: space-between;
/* 아이템들 사이에 공간이 균등하게 분배됩니다. */
}아이템 사이에 동일한 간격을 두며 가운데 정렬:
.container {
display: flex;
justify-content: space-around;
/* 아이템들 주위에 공간이 동일하게 분배되며,
가운데 정렬됩니다. */
}아이템들을 동등한 간격으로 확장:
.container {
display: flex;
justify-content: space-evenly;
/* 아이템들 사이와 주위에 공간이 동일하게 분배됩니다. */
}3. Align Items (아이템 정렬):
align-items: 아이템들을 수직 방향으로 정렬합니다.flex-start,flex-end,center,baseline,stretch등의 값으로 설정 가능합니다.
기본 값 (Default Value: stretch):
.container {
display: flex;
align-items: stretch;
/* 아이템들은 세로 방향으로 늘어나서
컨테이너의 높이를 채우려고 시도합니다.*/
}아이템들을 상단 정렬:
.container {
display: flex;
align-items: flex-start;
/* 아이템들을 세로 방향으로 상단에 정렬합니다. */
}아이템들을 가운데 정렬:
.container {
display: flex;
align-items: center;
/* 아이템들을 세로 방향으로 가운데 정렬합니다. */
}아이템들을 하단 정렬:
.container {
display: flex;
align-items: flex-end;
/* 아이템들을 세로 방향으로 하단에 정렬합니다. */
}아이템들의 기준선을 맞추어 정렬:
.container {
display: flex;
align-items: baseline;
/* 아이템들의 기준선(baseline)을 맞추어
정렬합니다. */
}4. Align Content (컨텐츠 정렬):
align-content: 여러 줄로 구성된 Flex Container의 컨텐츠를 수직 방향으로 정렬합니다.flex-start,flex-end,center,space-between,space-around,stretch등의 값으로 설정 가능합니다.
기본 값 (Default Value: stretch):
.container {
display: flex;
flex-wrap: wrap;
/* 여러 줄로 아이템을 배치하도록 설정 */
align-content: stretch;
/* 여러 줄이 컨테이너의 높이를 채우도록 늘어납니다. */
}컨테이너 내의 여러 줄 간 공간 분배:
.container {
display: flex;
flex-wrap: wrap;
/* 여러 줄로 아이템을 배치하도록 설정 */
align-content: space-between;
/* 여러 줄 간에 공간을 균등하게 분배합니다. */
}여러 줄을 중앙으로 정렬:
.container {
display: flex;
flex-wrap: wrap;
/* 여러 줄로 아이템을 배치하도록 설정 */
align-content: center;
/* 여러 줄을 수직 방향으로 가운데 정렬합니다. */
}아이템들 사이에 공간을 분배하며 여러 줄 중앙 정렬:
.container {
display: flex;
flex-wrap: wrap;
/* 여러 줄로 아이템을 배치하도록 설정 */
align-content: space-around;
/* 아이템들 주위에 공간을 동일하게 분배하고
여러 줄을 가운데 정렬합니다. */
}5. Flex Wrap (플렉스 랩):
flex-wrap: Flex Container 내의 아이템들이 한 줄로 배치되는지 여러 줄로 나누어 배치되는지 설정합니다.nowrap(기본값),wrap,wrap-reverse중 하나로 설정 가능합니다.
기본 값 (Default Value: nowrap):
.container {
display: flex;
flex-wrap: nowrap;
/* 아이템들이 한 줄로만 배치됩니다 (줄 바꿈 없음). */
}줄 바꿈 허용:
.container {
display: flex;
flex-wrap: wrap;
/* 아이템들이 필요한 경우 여러 줄로 나누어 배치됩니다. */
}줄 바꿈 방향 반전:
.container {
display: flex;
flex-wrap: wrap-reverse;
/* 아이템들이 필요한 경우 여러 줄로 나누어
배치되지만 줄 바꿈의 방향이 역순으로 됩니다. */
}6. Flex Grow (플렉스 성장):
flex-grow: 아이템들의 확장 가능한 크기를 설정합니다. 아이템 간에 사용 가능한 공간을 어떻게 분배할지 지정합니다.
.item {
flex-grow: 1;
/* 아이템이 사용 가능한 공간을 동등하게 확장합니다. */
}7. Flex Shrink (플렉스 수축):
flex-shrink: 아이템들의 수축 가능한 크기를 설정합니다. 공간 부족 시 아이템이 어떻게 줄어들지 지정합니다.
8. Order (순서):
order: 아이템들의 순서를 지정합니다. 작은 숫자가 앞에 배치됩니다.
display: flex; 속성을 사용하면 웹 페이지의 레이아웃을 보다 유연하게 구성할 수 있으며, Flexbox의 다양한 속성을 활용하여 원하는 디자인을 만들 수 있습니다.
