[CSS] Flex

Flex

• 항목을 행이나 열로 배열하는 레이아웃 방법
• float나 position을 사용하지 않고도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있음

flex의 기본 조건

• flex는 항상 부모 요소(flex container)와 자식 요소(flex items)로 구성됨
• 부모요소에 기본적으로 display: flex가 설정되어야 함

flex의 특징

• flex를 무시하려면 자식요소에 postion:absolute를 활용
• flex container와 flex item에 정의하는 속성으로 나누어 짐
• 자식요소는 행으로 배치된다(축으로 정렬)

---

Flex container 

• 모든 요소는 부모 요소에 disply:flex/inline-flex 설정을 기본으로 함
• flex container 속성은 전체적인 정렬이나 흐름에 관련된 속성 설정 : flex-direction, jusify-content, align-item, align-content, flex-wrap

1. display

• 부모 요소를 Flex 컨테이너로 만들어 내부 아이템들이 Flex 아이템이 됨

속성	설명
display:flex	- 요소를 block처럼 배치하면서 내부는 flex 컨테이너로 설정됨. - 내부 아이템들이 수평 또는 수직 정렬되도록 구성 가능. - 너비 100% 기본 - 줄 바꿈 가능
display:inline-flex	- flex-container가 inline-block 상태에서 자식들을 flex 방식으로 배치 - 너비 : 내용만큼 너비 - 블록처럼 줄 바꿈 안됨

 

.flex-container {
  display: flex; /* 블록 flex */
  background-color: #e0e0ff;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #999;
}

.inline-flex-container {
  display: inline-flex; /* 인라인 flex */
  background-color: #fae0ff;
  padding: 10px;
  border: 1px solid #999;
}

.box {
  background-color: #7343ff;
  color: #fff;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

---

2. flex-direction

• 아이템들이 주 축(main axis) 방향으로 어떻게 배치될지 결정
• 주 축(Main Axis): Flex 컨테이너에서 아이템이 나열되는 기본 방향
• 교차 축(Cross Axis): 주 축과 수직 방향
• flex-direction: 주 축의 방향을 설정하는 속성
• flex-direction이 바뀌면 아이템이 가로로 나열될지, 세로로 나열될지가 달라짐

값	설명	주축
row	기본값. 왼쪽 → 오른쪽	가로
row-reverse	오른쪽 → 왼쪽	가로 (반대)
column	위 → 아래	세로
column-reverse	아래 → 위	세로 (반대)

---

3. justify-content

• 주 축(main axis)을 따라 아이템을 어떻게 정렬할지 결정하는 속성
• 주 축(Main Axis): flex-direction에 따라 달라짐
  • row → 좌우 방향
  • column → 상하 방향

값	설명	예시
flex-start	시작점에 정렬	좌측 상단 또는 위쪽
flex-end	끝점에 정렬	우측 하단 또는 아래쪽
center	중앙에 정렬	중앙으로 모임
space-between	- 양 끝에 여백이 없음 - 나머지 공간 균등 분배
space-around	- 아이템 양쪽 여백 동일 (1/2 여백을 가짐) - 나머지 공간 균등 분배
space-evenly	-  아이템들 사이의 간격과 양 끝 간격까지 전부 동일하게 분배

---

4. align-items

• 교차 축(Cross Axis, 주 축과 수직 방향)을 따라 아이템을 정렬할 때 사용하는 속성
• 주 축(Main Axis): flex-direction에 따라 달라짐
  • row → 좌우 방향
  • column → 상하 방향
• 교차 축(Cross Axis): 주 축과 수직 방향
  • row → 세로
  • column → 가로
• 단일 줄(flex-wrap: nowrap)에서 사용
• 단일 줄(flex-wrap: nowrap)에서 전체 아이템 높이가 같으면 stretch 효과가 잘 보이지 않을 수 있음

값	설명	예시
flex-start	교차 축 시작점 정렬	위쪽 또는 왼쪽
flex-end	교차 축 끝점 정렬	아래쪽 또는 오른쪽
center	교차 축 중앙 정렬	가운데 정렬
baseline	텍스트 기준선(글자의 하단 라인) 기준으로 정렬 - 각 아이템 안의 텍스트 크기가 다르면,  가장 큰 글자의 기준선을 기준으로 나머지 아이템이 정렬	텍스트 라인 맞춤
stretch	- 컨테이너 높이/너비에 맞춰 늘림(기본값) - 아이템에 명시적인 높이(height)나 너비(width)가 설정되어 있지 않아야 함 - 아이템을 컨테이너 높이에 맞추고 늘리고 싶다면,    height가 지정되어 있지 않거나, auto, 100% 이어야 함	영역 가득 채움

---

5. align-content

• flex 컨테이너에서 여러 줄이 있을 때, 교차축(Cross Axis)을 따라 여러 줄(flex-wrap)로 감싸진 아이템들을 정렬하는 속성
• align-items와 비슷하지만, 한 줄(line)이 아닌 여러 줄에 적용
• 주로 flex-wrap: wrap 또는 wrap-reverse와 같이 아이템이 여러 줄일 때 의미 있음
• 한 줄(single line) → align-content 적용 안 됨
• 여러 줄(multi-line) → 교차축 전체 공간을 이용하여 줄 간격, 위치 조정 가능

속성값 설명 동작 예시 주의사항 / 적용 조건

값	설명	예시
flex-start	줄들을 교차축 시작점으로 정렬	위쪽 또는 왼쪽부터 줄 배치
flex-end	줄들을 교차축 끝점으로 정렬	아래쪽 또는 오른쪽부터 줄 배치
center	줄들을 교차축 중앙에 정렬	중앙에 줄 배치
space-between	첫 번째 줄과 마지막 줄은 끝에, 나머지는 균등 간격
space-around	줄 위아래 간격을 균등하게 설정. 줄 사이 간격은 2배가 됨
space-evenly	줄 사이 간격과 양 끝 간격까지 포함해 전부 동일하게 설정.
stretch	줄들을 교차 축 방향으로 빈 공간까지 꽉 채워서 늘림. 기본값. 아이템 높이가 고정(height 지정)되면 제대로 작동하지 않음

 

---

6. flex-wrap

• 아이템이 컨테이너를 넘어갈 때 한 줄에 계속 배치할지, 다음 줄로 넘길지 결정하는 속성
• 기본값: nowrap → 한 줄에 다 넣고 넘치면 잘림
• flex-direction과 조합하면 주 축 방향(row/column)에 따라 줄 바꿈 방식이 달라짐

값	설명	동작
nowrap	한 줄로 배치, 컨테이너 너비/높이 초과 시 잘림	기본값, 줄 바꿈 없음
wrap	컨테이너를 넘어가면 다음 줄로 자동 이동	여러 줄로 나눠서 배치
wrap-reverse	wrap과 같지만 교차축 방향 반대로	아래 → 위(또는 오른쪽 → 왼쪽)로 줄 쌓임

---

7. gap

• Flex 컨테이너 안의 아이템 간격을 일정하게 띄우는 속성
• 이전에는 margin으로 아이템 간격을 띄웠지만, gap은 보다 직관적이고 일관되게 간격을 지정 가능
• Flexbox, Grid 모두 사용 가능
• flex-direction이 바뀌면 row-gap과 column-gap이 실제 적용되는 방향도 달라짐
  
  • flex-direction: row → row-gap은 줄 사이(세로), column-gap은 아이템 사이(가로)
  • flex-direction: column → row-gap은 줄 사이(가로), column-gap은 아이템 사이(세로)
• 기본값 : 0

/* [문법] - 한 값 지정 */
gap: <row-gap> & <column-gap>;

/* [문법] - 두 값 지정 */
gap: <row-gap> <column-gap>;

속성명	설명	비고
gap	flex 아이템 사이의 가로, 세로 간격을 한꺼번에 지정	row-gap과 column-gap을 동시에 설정 - gap:10em -> row-gap, column-gap 모두 10em - gap:10em 20em -> row-gap:10rem column-gap:20rem
row-gap	flex 아이템 사이의 세로(줄 간) 간격 지정	flex-wrap이 wrap일 때 유효
column-gap	flex 아이템 사이의 가로(열 간) 간격 지정	flex-wrap 여부와 상관없이 유효

[CSS] Grid와 Flex에서의 gap

---

8. flex-flow

• flex-direction과 flex-wrap를 한 번에 설정할 수 있는 축약 속성(shorthand)
• 실무에서는 거의 항상 flex-flow: row wrap 또는 column nowrap 형태로 자주 사용

유의사항

• 순서 중요
  • <flex-direction> 먼저, <flex-wrap> 나중
  • flex-flow: wrap column; → 잘못된 순서
• 축약형이므로 단일 값만 넣으면 flex-direction으로 해석
  • 예: flex-flow: row; → flex-direction만 row, flex-wrap은 기본값 nowrap

 

/* [문법] */
flex-flow : flex-direction속성 flex-wrap속성

/* 기본값 */
flex-flow : row wrap

 

값	의미	기본값
flex-direction	주 축 방향 결정 (row, row-reverse, column, column-reverse)	row
flex-wrap	줄 바꿈 여부 결정 (nowrap, wrap, wrap-reverse)	nowrap

---

Flex item 관련 속성

• flex container의 자식 요소
• flex item의 속성은 자식 요소의 크기나 순서에 관련된 속성을 정의 : flex-grow, flex-shrink, flex-basis, order

1. flex-grow

• Flex 아이템이 컨테이너의 남는 공간을 얼마나 차지할지 결정하는 속성
• 단위 없는 숫자값을 가지며, 비율로 적용됨
• 컨테이너에 남는 공간이 있을 때, flex-grow 값만큼 비율로 공간을 나눠 가짐
   → 남은 공간을 나눠가지기 때문에 아이템이 정한 비율의 크기를 제대로 가지지 못함
   → 원하는 대로 아이템의 비율을 지정하기 위해서 반드시 flex-basis:0 이 필요
• 값이 0이면 아이템은 절대 커지지 않음
• 예: 1, 2, 3이면 → 총 비율 6 → 아이템들이 1:2:3 비율로 늘어남
• <number>: 0 이상 정수, 소수 가능

유의사항

• 컨테이너 안의 남는 공간에만 적용 : 아이템 크기가 이미 컨테이너를 꽉 채우면 적용 안 됨

/* 문법 */ 
.item {
  flex-grow: <number>;
}

값(number)	설명	예시 상황
0 (기본값)	남는 공간이 있어도 절대 커지지 않음	고정된 크기의 버튼, 로고 등
1	남는 공간이 있으면 균등하게 커짐 (다른 아이템과 같을 경우)	여러 아이템이 비슷하게 늘어나야 할 때
양수	남는 공간이 있을 때 비율적으로 더 크게 커짐	주목도 높은 요소(예: 강조 박스, 설명글)를 더 크게 하고 싶을 때

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }

/*
남는 공간이 3등분일 때,
- item1 → 1/3 차지
- item2 → 2/3 차지
*/

---

※ flex-grow는 flex-basis에 영향을 받는다

• flex-grow는 "남는 공간을 얼마나 더 차지할지" 비율로 설정하는 거지만
• 기준이 되는 "시작 크기"는 flex-basis로 정해져 있음

 1. flex-grow만 있고, flex-basis는 auto (기본값) 인 경우

• 이 경우 콘텐츠 크기, width 등이 기준이 되어서
  grow: 1을 줘도 아이템마다 처음 크기가 다르면 비율이 깨질 수 있음

 2: flex-basis: 0으로 명시해서 시작 크기를 통일한 경우

• 모든 아이템의 시작 크기를 0으로 통일
• 뒤에 남는 공간을 flex-grow 비율대로 정확히 나눠줌
• 균등 비율 적용 원할 때 가장 추천되는 패턴

---

2. flex-shrink

• Flex 아이템이 컨테이너 공간보다 커질 때, 줄어드는 비율을 결정하는 속성
• <number>: 0 이상 정수 또는 소수

유의사항

• flex-shrink는 컨테이너의 공간이 부족할 때만 작동함
• 컨테이너에 충분한 공간이 있다면, 어떤 값을 넣어도 효과 없음
• 너무 많은 텍스트나 고정된 너비가 있는 경우 shrink가 기대대로 작동하지 않을 수도 있음
• 0일 때는 줄어들지 않음
  • 컨테이너가 너무 작으면 overflow 발생

/* 문법 */ 
.item {
  flex-shrink: <number>;
}

값(number)	설명	예시 상황
0	- 절대 줄어들지 않음. - 공간이 부족해도 아이템의 크기를 유지함.	중요하거나 고정된 크기를 가진 버튼, 이미지 등에 사용
1 (기본값)	- 공간이 부족하면 줄어듦. - 다른 아이템과 같은 비율로 줄어듦.	일반적인 유연한 레이아웃 상황 (기본값으로 문제 없을 때)
2, 3 등	- 공간이 부족할 때 비율적으로 더 크게 줄어듦 - 숫자가 클수록 더 빨리/더 많이 줄어듦. - n배 줄어듬	덜 중요한 요소를 더 많이 줄이고 싶을

---

3. flex-basis

• 아이템의 기본 크기를 지정하는 속성
• flex-grow나 flex-shrink가 적용되기 이전 기준 크기
• 크기를 정할 때 width, height보다 우선 적용
• 단위(px, %, rem 등) 또는 키워드(auto, content)를 가질 수 있음

/* [문법] */
.item {
  flex-basis: <length> | auto | content;
}

값	설명	예시상황
auto (기본값)	콘텐츠 크기 또는 width/height 속성에 따라 기본 크기 설정	일반적인 상황 (크기 제어 필요 없음)
0	기본 크기를 무시하고, flex-grow에만 의존	flex: 1 같이 유연한 레이아웃 만들 때
크기 값(px, em, rem, vh, %등)	고정된 기본 크기 지정	일정한 크기로 시작하고 남는 공간은 grow로 조절하고 싶을 때
content	내용(content)의 크기에 맞춰 기본 크기 결정 (브라우저 지원 일부 제한 있음)

---

4. order

• 아이템의 순서를 바꾸는 속성
• HTML에서 작성된 순서와 관계없이, 시각적으로 보여지는 순서를 변경할 수 있음
• 아이템에 order 속성을 주면 순서가 무시되고 숫자가 작은 것부터 배치
• 정수를 가지며 음수,양수에 상관없이 작은 숫자부터 배치

유의사항

• 화면에 보여지는 순서만 바뀌고, DOM 순서가 변하지 않음 → 스크린 리더, 키보드 포커스 등 접근성에 영향이 있을 수 있음.
• 숫자가 같으면 작성된 순서를 그대로 유지
• order는 flex 컨테이너 안에서만 작동 (display: flex 또는 inline-flex)

/* [문법] */
.item {
  order: <integer>; /* 정수 값 (음수, 0, 양수 모두 가능) */
}

값(number)	설명	예시 상황
0 (기본값)	기본 순서대로 배치 (HTML 작성 순서 기준)	일반적인 구조
음수	가장 앞쪽으로 정렬	특정 버튼을 항상 제일 먼저 보이게 할 때
양수	숫자가 클수록 뒤로 밀림	아이템 순서를 유동적으로 바꾸고 싶을 때 사용

	<style>
		.container {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
		}

		.item {
			flex: 1;
			padding: 20px;
			text-align: center;
			background: lightblue;
			border: 1px solid #999;
			font-weight: bold;
		}

		.btn {
			padding: 10px 20px;
			border: none;
			cursor: pointer;
		}

		.primary {
			background: #4caf50;
			color: white;
		}

		.secondary {
			background: #f44336;
			color: white;
		}

		/* 반응형: 화면이 좁아지면 사이드바를 아래로 */
		.responsive {
			flex-wrap: wrap;
		}

		.responsive .sidebar {
			background: lightcoral;
		}

		@media (max-width: 600px) {
			.responsive .sidebar {
				order: 2;
				/* 모바일에서 아래로 이동 */
			}

			.responsive .content {
				order: 1;
				/* 콘텐츠는 위로 */
			}
		}
	</style>
    
    
<body>
	<h2>1️⃣ 기본 order (HTML 순서 그대로)</h2>
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
	</div>
	<h2>2️⃣ order 변경 (순서를 재배치)</h2>
	<div class="container">
		<div class="item" style="order: 3;">1</div>
		<div class="item" style="order: -1;">2</div>
		<div class="item" style="order: 0;">3</div>
		<div class="item" style="order: 2;">4</div>
	</div>
	<h2>3️⃣ 음수 order로 앞으로 보내기</h2>
	<div class="container">
		<div class="item" style="order: -2;">A</div>
		<div class="item" style="order: -1;">B</div>
		<div class="item" style="order: 0;">C</div>
		<div class="item" style="order: 1;">D</div>
	</div>
	<h2>4️⃣ 버튼 UI 패턴 (취소 버튼 왼쪽으로)</h2>
	<div class="container">
		<button class="btn primary">확인</button>
		<button class="btn secondary" style="order: -1;">취소</button>
	</div>
	<h2>5️⃣ 반응형 예제 (화면 작아지면 순서 바뀜)</h2>
	<div class="container responsive">
		<div class="item content">콘텐츠</div>
		<div class="item sidebar">사이드바</div>
	</div>
</body>

---

5. align-self

• 개별 flex 아이템에 대해 교차축(cross axis, flex-direction에 따라 세로축/가로축)의 정렬 방식을 지정하는 속성
• align-items가 컨테이너 전체의 아이템 정렬 방식을 정한다면,
  align-self는 특정 아이템 하나만 예외적으로 다르게 정렬할 수 있게 해줌
• 컨테이너의 align-items 설정을 덮어씀

유의사항

• stretch가 안 먹는 경우
  • 해당 아이템이 height 또는 width를 고정값(px 등)으로 가지면 stretch는 동작하지 않음.
  • 교차축 방향 크기가 auto여야 늘어남.
• baseline은 글자 크기 차이가 있어야 눈에 띔
  • 모든 글자가 같은 크기라면 baseline 정렬은 center와 비슷하게 보일 수 있음.
• align-self는 inline-flex에도 적용 가능
  • 부모가 display: flex든 inline-flex든 동일하게 동작.

/* [문법] */
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

값	설명	예시 상황
auto (기본값)	컨테이너의 align-items 값을 그대로 따름 - 개별적으로 설정하지 않으면 align-items와 동일	개별 정렬이 필요 없는 일반 상황
flex-start	교차 축의 시작 위치로 정렬	특정 요소만 맨 위에 고정하고 싶을 때
center	교차 축의 가운데에 정렬	버튼 하나만 가운데에 오게 만들고 싶을 때
flex-end	교차 축의 끝으로 정렬	한 아이템만 아래쪽 정렬이 필요할 때
stretch	가능한 높이만큼 늘어나서 정렬 (기본값처럼 작동) - height/width가 auto여야 적용됨	빈 공간 채우기 위한 자동 높이 설정
baseline	텍스트 기준선 맞춤	텍스트 크기가 다른 요소들을 기준선에 맞춰 정렬하고 싶을 때

---

6. flex 축약형

• lex는 세 가지 속성(flex-grow, flex-shrink, flex-basis)을 한 번에 지정하는 축약형(shorthand) 속성

유의사항

1. flex: 1은 대부분의 경우 “균등 분배” 용도로 많이 씀 → 실제론 flex: 1 1 0%임
2. flex: none은 width나 height로 지정한 크기를 그대로 유지함
3. flex-basis는 width/height보다 우선순위가 높음
   • 예: width: 100px; flex: 1 1 200px; → 기준은 200px

/* [문법] */
.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

속성값	내부 해석 (flex-grow, flex-shrink, flex-basis)	설명
auto	flex: 1 1 auto	콘텐츠 크기 기준, 늘어나고 줄어들 수 있음 (기본값과 유사)
none	flex:  0 0 auto	고정 크기, 늘어나거나 줄어들지 않음
initial	flex:  0 1 auto	CSS 기본값, 늘어나지 않고 줄어들 수 있음
unset	(속성 상속에 따라 initial 또는 inherit)	기본 상태로 초기화 (Flex는 비상속이므로 초기값과 같음)
<number> (예: 2)	flex:  <number> 1 0	grow에 숫자 할당, shrink 1, basis 0 (더 크게 늘어남)
<number> <number> <length-percentage> (예: 2 1 100px)	명시된 값들 그대로	grow, shrink, basis를 모두 직접 지정

 

축약형 기본 규칙

값 1개만 쓰면 → grow

flex: 1; /* flex: 1 1 0% */
flex: 2; /* flex: 2 1 0% */

값 2개 쓰면 → grow, shrink

flex: 1 0; /* flex: 1 0 0% */
flex: 2 1; /* flex: 2 1 0% */

값 3개 쓰면 → grow, shrink, basis

flex: 1 0 200px; /* grow=1, shrink=0, basis=200px */
flex: 0 1 auto;  /* grow=0, shrink=1, basis=auto */

자주 쓰는 패턴

• flex: 1 → 균등 분배
• flex: auto → 자동 크기 + 늘어나고 줄어듦
• flex: none → 고정 크기

---

Reference

flex example

https://poiemaweb.com/css3-flexbox https://www.w3schools.com/css/css3_flexbox.asp https://developer.mozilla.org/ko/docs/Web/CSS/flex MDN WEB DOCS