Home CSS_flex 방식으로 레이아웃 만들기
Post
Cancel

CSS_flex 방식으로 레이아웃 만들기

Posted 2023-10-15 13 min read

부모 요소에 flex 적용하기

flex

  • 레이아웃 배치 방법
  • 남는 공간을 어떻게 차지할 것인지에 대한 성질이 핵심 개념
  • 부모 요소와 자식 요소를 이용하여 구성
  • 부모요소를 flex container, 자식 요소를 flex item

image

속성명 속성값 설명
display flex 부모요소 블록 속성을 유지 및 자식 요소에 flex 환경 설정
inline-flex 부모요소 인라인 속성으로 변경 및 자식 요소에 flex 환경 설정
flex-direction row flex의 기본축을 가로로 지정
column flex의 기본축을 세로로 지정
row-reverse 자식 요소 콘텐츠를 가로 역순으로 정렬
column-reverse 자식 요소 콘텐츠를 세로 역순으로 정렬
flex-wrap nowrap 자식 요소의 줄 바꿈을 하지 않음
wrap 자식 요소의 줄 바꿈을 함
flex-flow row wrap flex-direction과 flex-wrap속성의 축약문

display - 자식 요소의 배치 방법 지정하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>display: flex</title>
		<link rel="css" href="./css.css">
	</head>
	<body>
		<main>
			<section>
				<article></article>
				<article></article>
				<article></article>
				<article></article>
				<article></article>
			</section>
		</main>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
main {
	width: 100%;
	height: 100vh;
	background: black;
}
section {
	border: 10px solid yellow;
	display: flex; 
}
/* article 요소가 가로로 정렬(flex 기본값: 좌 > 우) */
/* 부모요소인 section에는 블록 요소 속성이므로 너빗값은 100%로 설정됨 */
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid cyan;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
main {
	width: 100%;
	height: 100vh;
	background: black;
}
section {
	border: 10px solid yellow;
	display: inline-flex; 
}
/* 부모요소인 section이 인라인 요소 속성으로 변경되었으므로 너빗값은 자식 요소의 전체 너빗값만큼 변경 */
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid cyan;
}

flex-wrap - 자식 요소에 줄 바꿈 적용하기

  • flex에서는 flex-wrap을 설정해야 자식 요소의 저빗값을 유지하며 줄 바꿈 가능 (float 속성을 사용하여 레이아웃을 만들 때 모든 자식 요소의 총 너빗값이 부모 요소의 너빗값보다 크면 자동 줄바꿈)
  • 기본값이 felx-wrap: nowrap
  • wrap 설정을 안했을 경우 브라우저를 줄였을 때 줄 바꿈되지 않고 창과 같은 비율로 줄어들게됨

flex-flow — flex-direction, flex-wrap 속성을 한꺼번에 적용하기

  • flew-flow 속성 사용 시 flew-direction과 flex-wrap 속성을 한번에 지정할 수 있음
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
main {
	width: 100%;
	height: 100vh;
	background: black;
}
section {
	border: 10px solid yellow;
	display: flex; 
	flex-flow: row wrap;
	/* direction속성과 wrap속성 차례로 입력 */
}
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid cyan;
}

자식 요소 정렬하기

  • 자식 요소 정렬 : justify-content나 align-content, align-items 속성 사용
  • 초기 설정 축 : 가로축
    • 기본 축 변경 : flex-direction으로 변경

justify-content - 기본 축으로 정렬하기

속성명 속성값 설명
justify-content flex-start 자식 요소를 시작 방향으로 정렬
flex-end 자식 요소를 종료 방향으로 정렬
center 자식 요소를 가운데로 정렬
space-between 자식 요소들 좌우 사이 여백만 균일하게 배분하여 정렬
space-around 자식 요소들의 여백을 균일하게 배분하여 정렬
space-evenly 자식 요소들의 여백을 양끝까지 균일하게 배분하여 정렬

5-justify-content

align-content, align-items - 반대 축으로 정렬하기

속성명 속성값 설명
align-content 또는 align-itmes flex-start 자식 요소를 시작 방향으로 정렬
flex-end 자식 요소를 종료 방향으로 정렬
center 자식 요소를 가운데로 정렬
space-between 자식 요소들 좌우 사이 여백만 균일하게 배분하여 정렬
space-around 자식 요소들의 여백을 균일하게 배분하여 정렬
space-evenly 자식 요소들의 여백을 양끝까지 균일하게 배분하여 정렬 
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

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
main {
	width: 100%;
	height: 100vh;
	background: black;
}
section {
	width: 100%;
	height: 100%;
	border: 10px solid yellow;
	/* 요소 크기 계산 기준 = 테두리 기준 */
	box-sizing: border-box;
	display: flex; 
	flex-flow: row wrap;
	justify-content: space-evenly;
	/* 기본 축이 row이므로 반대 축인 세로 방향에서 가운데 정렬 */
	align-items: center;
}
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid cyan;
}

/* 이 경우 웹 브라우저의 너비를 줄여서 자식 요소가 줄 바꿈을 하면 가운데 정렬 미적용 : 이럴때 align-content 속성 사용 */

image

box-sizing

  • 요소의 크기 계산 기준 지정
    • context-box : 요소의 내용으로 크기 계산(= 박스 안 내용 기준 박스 크기 지정)
      • border와 padding을 사용할 경우 수동으로 계산해서 명시해줘야함
    • border-box : 요소의 내용 + padding + border로 크기 계산(= 테두리 기준 박스 크기 지정)
      • 크기 계산 자체를 요소의 내용을 포함해서 border와 padding을 합쳐서 계산
      • 명시된 가로 사이즈를 유지한 상태로 내부에 padding border 포함
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

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
main {
	width: 100%;
	height: 100vh;
	background: black;
}
section {
	width: 100%;
	height: 100%;
	border: 10px solid yellow;
	box-sizing: border-box;
	display: flex;
	 /* align-content를 사용했으므로 wrap 필수 입력  */
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-content: center;
}
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid cyan;
}

/* 이 경우 줄 바꿈을 하더라도 세로로 가운데 배치 */

image

줄 바꿈을 해야 하는 자식 요소가 여러 개 있다면 align-content 속성, 그렇지 않다면 align-items 속성 사용

자식 요소의 순서 지정하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>order</title>
		<link rel="css" href="./css.css">
	</head>
	<body>
		<section>
				<article>1</article>
				<article>2</article>
				<article>3</article>
		</section>
	</body>
</html>

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
32
33

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
section {
	width: 100%;
	background: black;
	display: flex;
}
section article {
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid red;
	font-size: 50px;
	color: black;
	/* article 안쪽 숫자를 정중앙 배치할 것이므로 flex, content 및 items 속성값 center로 지정 */
	display: flex;
	justify-content: center; /* 가로기준 중앙 */
	align-items: center; /* 세로기준 중앙 */
}
/* 자식 요소 순서 지정 : 1 = 3번째, 2 = 2번째, 3 = 1번째 */
section article:nth-of-type(1) {
	order:3;
}
section article:nth-of-type(2) {
	order:2;
}
section article:nth-of-type(3) {
	order:1;
}

요소의 여백 비율 지정하기

flex-grow - 요소의 안쪽 여백 확대하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>flex grow</title>
		<link rel="css" href="./css.css">
	</head>
	<body>
		<section>
				<article>flex-grow</article>
				<article>flex-grow</article>
				<article>flex-grow</article>
		</section>
	</body>
</html>

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
32
33
34

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
section {
	width: 100%;
	background: black;
	display: flex;
}
section article {
	background: white;
	border: 1px solid cyan;
	/* border-box 지정 후 너빗값과 높잇값 따로 지정 x */
	box-sizing: border-box; 
	font-size: 50px;
	color: white;
	display: flex;
}
/* 부모 요소에만 flex 지정 후 자식 요소 크기를 따로 입력하지 않으면 자식 요소는 inline-block으로 설정되어 입력한 텍스트 크기만큼만 설정됨 */

section article:nth-of-type(1) {
	flex-grow: 1;
}
section article:nth-of-type(2) {
	flex-grow: 1;
}
section article:nth-of-type(3) {
	flex-grow: 1;
}
/* 'flex-grow: 2;' 일 경우 여백 2배. 3일 경우 3배(1 기준) */
/* flex-grow 속성값 0 지정 시 원래 크기 */
/* 남은 부모 영역의 크기를 똑같이 배분 + 안쪽 여백 설정으로 인한 article 요소 크기 확대 */

flex-grow는 전체 영역의 크기를 조절하는 것이 아닌 요소의 안쪽 여백만 비율로 조절

flex-shirink - 요소의 안쪽 여백 축소하기

  • 요소의 크기를 줄였을 때 안쪽 여백의 감소 비율을 지정할 수 있음
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>flex shirink</title>
		<link rel="css" href="./css.css">
	</head>
	<body>
		<section>
				<article>flex-shirink</article>
				<article>flex-shirink</article>
				<article>flex-shirink</article>
		</section>
	</body>
</html>

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
32

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
section {
	width: 100%;
	background: black;
	display: flex;
}
section article {
	/* 브라우저 화면이 기본 너빗값보다 줄어들었을 때 감소한 비율 확인을 위해 width: 400px 지정(100%가 아니도록)*/
	width: 400px;
	background: white;
	border: 1px solid red;
	box-sizing: border-box;
	font-size: 50px;
	color: black;
	display: flex;
}
/* flex-shrink 속성값이 클수록 크게 감소 */
section article:nth-of-type(1) {
	flex-shrink: 1;
}
section article:nth-of-type(2) {
	flex-shrink: 2;
}
section article:nth-of-type(3) {
	flex-shrink: 3;
}
/* 속성값을 1로 지정한 첫번째 박스 감소 비율이 가장 작아 실제 여백은 첫번째 박스가 가장 큼 */

flex - 전체 너빗값의 비율 조절하기

  • 요소의 전체 너빗값 비율 조절
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

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
}
section {
	width: 100%;
	background: black;
	display: flex;
}
section article {
	width: 400px;
	background: white;
	border: 1px solid red;
	box-sizing: border-box;
	font-size: 50px;
	color: black;
	display: flex;
}
section article:nth-of-type(1) {
	flex: 1;
}
section article:nth-of-type(2) {
	flex: 2;
}
section article:nth-of-type(3) {
	flex: 3;
}
/* 속성값 1인 첫번째 박스 기준 두번째, 세번째 박스의 전체 너비가 1 : 2: 3 비율로 변경 */
Web, Study
Web Frontend CSS
This post is licensed under CC BY 4.0 by the author.
Contents