[CSS] Flex

CSS/CSS

[CSS] Flex

ui-o 2025. 6. 17. 14:46

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 컨테이너로 설정됨. - 내부 아이템들이 수평 또는 수직 정렬되도록 구성 가능.
display:inline-flex	- flex-container가 inline-block 상태에서 자식들을 flex 방식으로 배치

<style>
		.flex-container {
			background-color: #ddd;
			display: flex;
		}

		.flex-container>div {
			background-color: yellow;
		}
	</style>
    <div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>

2. flex-direction

flex item을 주 축 방향을 정함
기본값 => 메인 축 : X 좌표, 교차 축 : Y 좌표

속성값	설명
row (default)	- 왼쪽부터 차례대로 정렬
column	- 위부터 아래로 정렬
row-reverse	- 오른쪽부터 왼쪽으로 정렬
cloumn-reverse	- 아래부터 위로

3. justify-content

주 축 방향으로 아이템들을 어떻게 배치할지 결정
flex-direction:row/column 에 따라 정렬 기준이 달라짐
flex-direction:row 상태에서 : x축 방향으로 배치
flex-direction:cloumn 상태에서 : y축 방향으로 배치

속성값	설명
flex-start	- 아이템들을 주 축의 시작 지점에 붙여서 정렬. - flex-direction:row 일 때 : 왼쪽부터 - flex-direction:column 일 때: 위 부터
center	- 아이템들을 주 축의 가운데에 정렬.
flex-end	- 아이템들을 주 축의 끝 지점에 붙여서 정렬. - flex-direction:row 일 때 : 오른쪽 부터 - flex-direction:column 일 때: 아래 부터
space-between	- 처음과 끝 item은 양 끝에 여백이 없음 - flex-item들을 동일한 여백으로 배치
space-around	- 모든 아이템의 앞뒤 간격을 균등하게 설정. - 처음와 끝 item은 양 여백 1/2을 가지고, 아이템 간 간격은 2배로 생김.
space-evenly	- 아이템들 사이의 간격과 양 끝 간격까지 전부 동일하게 분배

4. align-items

교차 축을 기준으로 item의 배치 정렬 방식 지정
flex-direction에 따라 정렬 기준이 달라짐
flex-direction:row 상태에서 : y축 방향으로 배치
flex-direction:cloumn 상태에서 : x축 방향으로 배치

속성값	설명
flex-start	아이템들을 교차 축의 시작 위치에 정렬. 예: flex-direction이 row일 경우 상단 정렬.
flex-end	아이템들을 교차 축의 끝 위치에 정렬. 예: row일 경우 하단 정렬.
center	아이템들을 교차 축 가운데에 정렬.
stretch	아이템 높이나 너비를 컨테이너의 교차 축 길이에 맞게 늘림. 기본값.
baseline	텍스트의 기준선(baseline) 을 기준으로 정렬. 다양한 크기의 텍스트가 있을 때 유용.

5. align-content

flex 컨테이너에서 여러 줄이 있을 때, 교차 축을 기준으로 아이템의 전체 줄들 간의 간격과 배치 방식을 지정
justify-content 속성값과 동일한 속성값 사용 가능
flex-wrap : wrap 으로 여러 줄인 경우에만 의미가 있고, 한 줄인 경우에는 효과가 없음

* align-items가 각 줄 안에 있는 개별 아이템들을 교차축에서 정렬한다면,
align-content는 줄 자체(라인들) 가 교차축에서 어떻게 배치될지 정렬

값	설명
flex-start	줄들을 교차 축의 시작 쪽에 몰아 정렬. 위쪽 또는 왼쪽.
flex-end	줄들을 교차 축의 끝 쪽에 몰아 정렬. 아래쪽 또는 오른쪽.
center	줄들을 교차 축 중앙에 정렬.
space-between	줄 사이 간격을 균등 분배, 첫 줄은 시작에, 마지막 줄은 끝에 붙음.
space-around	줄 위아래 간격을 균등하게 설정. 줄 사이 간격은 2배가 됨.
space-evenly	줄 사이 간격과 양 끝 간격까지 포함해 전부 동일하게 설정.
stretch	줄들을 교차 축 방향으로 빈 공간까지 꽉 채워서 늘림. 기본값.

6. flex-wrap

flex-item 요소가 flex container를 넘어갈 경우 줄 바꿈 방식을 지정
flex-direction에 따라 정렬 기준이 달라짐

속성	설명
wrap	- 자동으로 줄바꿈
nowrap	- 줄바꿈 하지 않음 - 설정된 flex-item 너비가 무시될 수 있음
wrap-revese	- 줄 바꿈하되, 줄이 반대 방향(아래→위 또는 오른쪽→왼쪽) 으로 쌓임.

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		width: 200px;
		flex-wrap: wrap;
		align-items: flex-start
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}
	</style>

	<div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</div>

7. gap

flex 아이템들 사이에 가로/세로 간격을 한 번에 설정하는 속성
적용 대상 :Flexbox 컨테이너, Grid 컨테이너 둘 다 가능
기본값 : 0
px, rem, %, em 등

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

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 200px;
		gap: 10px;
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}
</style>

<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

8. flex-flow

flex-direction + flex-wrap 을 한 줄에 같이 설정할 수 있게 해주는 축약형 속성
실무에서는 거의 항상 flex-flow: row wrap 또는 column nowrap 형태로 자주 사용

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

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

Flex item 관련 속성

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

1. flex-grow

flex container의 메인 축의 크기가 늘어날 때 빈 공간이 있을 경우 아이템이 남는 공간을 얼마나 차지할지 비율로 결정
컨테이너에 남는 공간이 있을 때, flex-grow 값만큼 비율로 공간을 나눠 가짐
→ 남은 공간을 나눠가지기 때문에 아이템이 정한 비율의 크기를 제대로 가지지 못함
→ 원하는 대로 아이템의 비율을 지정하기 위해서 반드시 flex-basis:0 이 필요
값이 0이면 아이템은 절대 커지지 않음
예: 1, 2, 3이면 → 총 비율 6 → 아이템들이 1:2:3 비율로 늘어남

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

	<style>
		.flex-container {
			background-color: #ddd;
			display: flex;
			flex-direction: row;
			gap: 10px;
		}

		.flex-container>div {
			background-color: yellow;
			width: 30px;
			flex-grow: 1;
		}

		.flex-container>div:first-child {
			flex-grow: 2;
		}
   </style>
   <div class="flex-container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

※ 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 container의 메인축의 크기가 줄어들 때 빈 공간이 있을 경우 flex-item 크기를 줄일 수 있을지 여부를 결정

유의사항

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

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

첫번째 flex-shrink:2, 나머지 flex-shrink:1인 경우

3. flex-basis

아이템의 기본 크기를 정해주는 속성
flex-grow나 flex-shrink가 적용되기 이전 기준 크기
크기를 정할 때 width, height보다 우선 적용

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

.item { flex-basis: 200px; } /*아이템의 기본 크기를 200px로 시작*/

4. order

flex item에 order 속성을 주면 순서가 무시되고 숫자가 작은 것부터 배치
정수를 가지며 음수,양수에 상관없이 작은 숫자부터 배치
숫자가 같으면 원래 순서 유지됨

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

<style>
	.flex-container {
		background-color: #ddd;
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	.flex-container>div {
		background-color: yellow;
		width: 30px;
	}

	.flex-container>div:first-child {
		order: 3
	}
</style>
<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

5. align-self

개별 아이템의 교차 축 정렬 방식 지정
컨테이너의 align-items 설정을 덮어씀

값 의미 설명 예시 상황

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

6. flex 축약형

축약형 순서 : flex-grow, flex-shrink, flex-basis 순으로 값을 하나로 지정 가능

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

• Reference URL

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

저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS' 카테고리의 다른 글

[CSS] 그리드(Grid) (0)	2025.06.25
[CSS] CSS 상속 및 초기화 (0)	2025.06.18
[CSS] font-size (0)	2025.06.13
[CSS] CSS 적용 방식 (inline, embedded(internal), external) (0)	2025.06.13
[가상 요소 선택자] first-letter, first-line (0)	2023.01.30

현재글[CSS] Flex

리액트, 영어, css, 화살표 함수, gsap, React, 자바스크립트, 자바스크립트 객체, 유용현 표현, 반응형 퍼블리싱, JavaScript, 유용한 표현, 반응형 웹, 구동사, 스피킹, 유용한표현, javascript 객체, 퍼블리싱, html, 영어회화,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

-

[CSS] Flex

Flex

flex의 기본 조건

flex의 특징

Flex container

1. display

2. flex-direction

3. justify-content

4. align-items

5. align-content

6. flex-wrap

7. gap

8. flex-flow

Flex item 관련 속성

1. flex-grow

2. flex-shrink

3. flex-basis

4. order

5. align-self

6. flex 축약형

• Reference URL

'CSS > CSS' 카테고리의 다른 글

'CSS/CSS'의 다른글

티스토리툴바

[CSS] Flex

Flex

flex의 기본 조건

flex의 특징

Flex container

1. display

2. flex-direction

3. justify-content

4. align-items

5. align-content

6. flex-wrap

7. gap

8. flex-flow

Flex item 관련 속성

1. flex-grow

2. flex-shrink

3. flex-basis

4. order

5. align-self

6. flex 축약형

• Reference URL

'CSS > CSS' 카테고리의 다른 글

'CSS/CSS'의 다른글

관련글

티스토리툴바