플렉스박스(Flexbox)란?
플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있도록 도와줍니다. Flexbox를 사용하면 컨테이너 내부의 아이템들을 수평 또는 수직 방향으로 배치하고 정렬할 수 있습니다. 플렉스 컨테이너와 플렉스 아이템이라는 두 가지 주요 개념으로 구성됩니다.
플렉스 컨테이너 설정
display: flex
: 요소를 플렉스 컨테이너로 설정합니다.display: inline-flex
: 인라인 플렉스 컨테이너로 설정합니다.
예제:
.container {
display: flex;
}
<div class="container">
<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>
</div>
플렉스 컨테이너 속성
flex-direction
플렉스 아이템의 주축 방향을 설정합니다.
row
: 가로 방향 (기본값)row-reverse
: 가로 방향 반대column
: 세로 방향column-reverse
: 세로 방향 반대
예제:
.container {
display: flex;
flex-direction: row; /* 또는 column, row-reverse, column-reverse */
}
justify-content
주축을 따라 아이템을 정렬합니다.
flex-start
: 주축의 시작 부분에 정렬 (기본값)flex-end
: 주축의 끝 부분에 정렬center
: 주축의 중앙에 정렬space-between
: 아이템 사이에 동일한 간격을 배치space-around
: 아이템 주위에 동일한 간격을 배치
예제:
.container {
display: flex;
justify-content: center; /* 또는 flex-start, flex-end, space-between, space-around */
}
align-items
교차축을 따라 아이템을 정렬합니다.
flex-start
: 교차축의 시작 부분에 정렬flex-end
: 교차축의 끝 부분에 정렬center
: 교차축의 중앙에 정렬baseline
: 아이템의 기준선에 정렬stretch
: 아이템을 컨테이너의 높이에 맞게 늘림 (기본값)
예제:
.container {
display: flex;
align-items: center; /* 또는 flex-start, flex-end, baseline, stretch */
}
flex-wrap
플렉스 아이템을 여러 줄로 나눕니다.
nowrap
: 단일 행에 모든 아이템을 배치 (기본값)wrap
: 여러 행에 아이템을 배치wrap-reverse
: 반대 방향으로 여러 행에 아이템을 배치
예제:
.container {
display: flex;
flex-wrap: wrap; /* 또는 nowrap, wrap-reverse */
}
align-content
여러 행을 교차축을 따라 정렬합니다. (flex-wrap이 wrap
일 때 적용)
flex-start
: 교차축의 시작 부분에 정렬flex-end
: 교차축의 끝 부분에 정렬center
: 교차축의 중앙에 정렬space-between
: 행 사이에 동일한 간격을 배치space-around
: 행 주위에 동일한 간격을 배치stretch
: 행을 컨테이너의 높이에 맞게 늘림
예제:
.container {
display: flex;
flex-wrap: wrap;
align-content: center; /* 또는 flex-start, flex-end, space-between, space-around, stretch */
}
플렉스 아이템 속성
flex
아이템의 크기와 공간 배분을 설정합니다. flex-grow
, flex-shrink
, flex-basis
의 단축 속성입니다.
예제:
.item {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}
order
플렉스 아이템의 순서를 설정합니다. 기본값은 0입니다.
예제:
.item {
order: 1; /* 또는 다른 숫자 값 */
}
flex-grow
남은 공간을 차지할 비율을 설정합니다. 기본값은 0입니다.
예제:
.item {
flex-grow: 2; /* 또는 다른 숫자 값 */
}
flex-shrink
아이템이 축소될 비율을 설정합니다. 기본값은 1입니다.
예제:
.item {
flex-shrink: 1; /* 또는 다른 숫자 값 */
}
flex-basis
아이템의 기본 크기를 설정합니다. auto
또는 특정 크기를 지정할 수 있습니다.
예제:
.item {
flex-basis: 200px; /* 또는 다른 크기 값 */
}
align-self
개별 아이템의 정렬을 설정합니다. align-items
속성을 재정의합니다.
auto
: 부모 컨테이너의align-items
속성 상속flex-start
: 교차축의 시작 부분에 정렬flex-end
: 교차축의 끝 부분에 정렬center
: 교차축의 중앙에 정렬baseline
: 아이템의 기준선에 정렬stretch
: 아이템을 컨테이너의 높이에 맞게 늘림
예제:
.item {
align-self: center; /* 또는 flex-start, flex-end, baseline, stretch */
}
결론
플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다. 플렉스 컨테이너와 플렉스 아이템을 사용하여 요소들을 효과적으로 배치하고 정렬할 수 있습니다. 이번 글에서는 플렉스박스의 기본 개념과 다양한 속성에 대해 배웠습니다.
다음 글에서는 그리드 레이아웃(Grid Layout)에 대해 알아보겠습니다.
다음 글에서 만나요!
'웹 디자인' 카테고리의 다른 글
[웹 디자인] 15일차: 반응형 디자인 소개 (0) | 2024.08.15 |
---|---|
[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout) (0) | 2024.08.14 |
[웹 디자인] 12일차: CSS 레이아웃 기초 (0) | 2024.08.12 |
[웹 디자인] 11일차: CSS 박스 모델 (0) | 2024.08.11 |
[웹 디자인] 10일차: CSS 색상 및 배경 (0) | 2024.08.10 |