elex/css-examples

Fork 0

Files

Elex 7936270d10 2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00

6.7 KiB

Raw Blame History

Flexbox

Flexbox(플렉스박스)는 요소를 효율적으로 정렬하고 배치하는 강력한 레이아웃 시스템이야.

가로, 세로 정렬을 쉽게 제어하고, 반응형 디자인에 유용!

부모 속성	설명	옵션
flex-direction	주축 방향 설정	row, row-reverse, column, column-reverse
justify-content	주축 방향에서 아이템 정렬	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	교차축 방향에서 아이템 정렬	flex-start, flex-end, center, stretch, baseline
align-content	여러 줄 정렬	flex-start, flex-end, center, space-between, space-around, stretch
flex-wrap	자동 줄바꿈	nowrap, wrap, wrap-reverse
flex-flow	= flex-direction + flex-wrap

자식 속성	설명	옵션
flex	= flex-grow + flex-shrink + flex-basis
flex-grow	남은 공간 비율
flex-shrink	축소 비율
flex-basis	기본 크기	auto
align-self	개별적 아이템 정렬	auto, flex-start, flex-end, center, baseline, stretch
order	순서 변경

Flexbox 개념 및 기본 구조

Flexbox는 **부모 요소(flex container)와 자식 요소(flex items)**로 구성돼.

.container {
  display: flex;
} /* .container 내부의 모든 자식 요소가 Flex 아이템이 되어 정렬됨. */

요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.

주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
display: flex이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.

display: flex 기본 효과

flex를 적용한 요소의 자식 요소(flex items)가 한 줄에 정렬됨
자식 요소의 width는 자동으로 콘텐츠 크기에 맞게 조정됨
기본적으로 가로 방향(row) 정렬. inline 요소도 블록처럼 배치됨

.container {
  display: flex;
  background-color: lightgray;
}
.item {
  width: 100px;
  height: 50px;
  background-color: skyblue;
  margin: 5px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

부모 요소(.container) 속성

Flexbox 컨테이너(부모 요소)에서 레이아웃을 조정할 수 있는 주요 속성들!

flex-direction

주축(main axis) 방향을 설정

row : 기본값 (왼쪽 → 오른쪽 정렬)
row-reverse : 오른쪽 → 왼쪽 정렬
column : 위 → 아래 정렬
column-reverse : 아래 → 위 정렬

.container {
  display: flex;
  flex-direction: column;
} /* 아이템이 세로 방향으로 정렬됨! */

justify-content

주축(main axis) 방향에서 아이템 정렬 방식

flex-start : 왼쪽 정렬 (기본값)
flex-end : 오른쪽 정렬
center : 가운데 정렬
space-between : 양끝 정렬 (사이 간격 자동)
space-around : 요소 주변 간격 동일
space-evenly : 요소 간 간격 동일

.container {
  display: flex;
  justify-content: center;
} /* 아이템이 가로 방향으로 가운데 정렬됨! */

align-items

교차축(cross axis) 방향에서 아이템 정렬 방식

flex-start : 위쪽 정렬
flex-end : 아래쪽 정렬
center : 세로 중앙 정렬
stretch : 높이를 컨테이너에 맞게 늘림 (기본값)
baseline : 텍스트 기준선에 맞춤

.container {
  display: flex;
  align-items: center;
}

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-wrap

flex-wrap 속성은 Flexbox 컨테이너 안의 아이템이 한 줄에 배치될지, 여러 줄로 나눠질지를 결정하는 속성이야.

기본적으로 flex는 한 줄(nowrap)에 모든 아이템을 배치하지만, flex-wrap을 설정하면 자동 줄바꿈이 가능!

nowrap : 한 줄에 모든 아이템을 배치 (기본값)
wrap : 자동으로 줄바꿈하여 여러 줄로 배치
wrap-reverse : 줄바꿈 + 아이템의 줄 순서를 반대로 배치

.container {
  display: flex;
  flex-wrap: wrap;
} /* 아이템이 컨테이너 너비를 초과하면 다음 줄로 이동! */

자식 요소(.item) 속성

각 개별 아이템(flex items)에 적용하는 속성들!

flex-grow

컨테이너의 남은 공간을 어떻게 나눌지 설정

0 : 기본값 (남은 공간을 차지하지 않음)
1 : 동일한 비율로 남은 공간을 나눠 가짐
2 이상 : 비율을 설정하여 공간 차지

.item:first-child {
  flex-grow: 2; /* 첫 번째 아이템이 두 배 크기 */
}
.item {
  flex-grow: 1;
}

flex-shrink

공간이 부족할 때 크기가 줄어드는 비율

0 : 크기를 줄이지 않음
1 : 기본값 (동일한 비율로 축소)
2 이상 : 더 많이 줄어듦

.item:first-child {
  flex-shrink: 2; /* 첫 번째 아이템이 두 배 더 줄어듦 */
}

flex-basis

요소의 기본 크기를 지정

auto : 내용 크기에 따라 자동 설정
px, % : 고정 크기 지정

.item {
  flex-basis: 200px;
}

align-self

align-self는 개별 그리드(Grid) 또는 플렉스(Flexbox) 아이템의 세로 정렬을 조정하는 속성이야.

align-items가 컨테이너 내부의 모든 아이템을 정렬하는 반면, align-self는 특정 아이템 하나만 개별적으로 정렬 가능!

auto : 부모(align-items) 설정을 따름 (기본값)
flex-start : 위쪽 정렬
flex-end : 아래쪽 정렬
center : 세로 중앙 정렬
baseline : 텍스트 기준선에 맞춤
stretch : 컨테이너 높이에 맞게 늘어남 (기본값)

.container {
  display: flex;
  align-items: center; /* 모든 아이템을 세로 중앙 정렬 */
}
.item:nth-child(2) {
  align-self: flex-start; /* 두 번째 아이템만 위쪽 정렬 */
}

order

아이템의 정렬 순서를 변경

0 : 기본값 (HTML 순서대로)
1, 2, 3 : 숫자가 클수록 뒤로 이동
-1 : 앞으로 이동

.item:nth-child(2) {
  order: -1; /* 두 번째 아이템을 맨 앞으로 이동 */
}

6.7 KiB Raw Blame History