쿠루가이

쿠루가이

프로그래머가 되고싶은 중년 :)

Chapter 1-6. Flex 핵심정리 - 유용한 기법들

Date:     Updated:

카테고리:

태그:

인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀

👱특정 열만 오른쪽으로 정렬하는 방법 - auto margin

  • margin의 auto값을 이용해서 flex로 정렬된 item들을 살짝 다르게 배치하는 방법에 대해서 알아보겠습니다. A, B, C 열이 있는데 C 열만 오른쪽으로 보내는 방법에대해서 설명합니다. 메인축이 row로 되어 있으므로 오른쪽 정렬하려면 justify-content가 떠오르는데 C열만 오른쪽으로 보내는 것은 불가능합니다. 이 때 개별 열만 오른쪽으로 보내고 싶을 때 margin을 사용합니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
		.flex-container {
			display: flex;
		}

		.flex-item {
			width: 150px;
		}
		.flex-item:last-child {
			margin-left: auto;
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
</body>
</html>

고정폭 컬럼과 가변폭 컬럼 혼합

  • 3개 열이 있는데 첫번째열과 세번째열은 열폭이 고정, 가운데 열만 가변으로 만드는 예제입니다. 여기에 사용되는 기술은 flex-basis보다 작을 때 크기를 줄여주는 flex-shrink와 flx-basis보다 클 때 크기를 늘려주는 flex-grow를 사용합니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
		.flex-container {
			display: flex;
		}

		.flex-item {
			width: 150px;
		}
		.flex-item:nth-child(1) {
			flex-shrink: 0;
			width: 150px
		}
		.flex-item:nth-child(2) {
			flex-grow: 1;
		}
		.flex-item:nth-child(3) {
			flex-shrink: 0;
			width: 200px
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
</body>
</html>

풋터를 창 바닥에 붙이기

  • Header와 Footer는 가각 위아래에 있고, 가운데 남는 공간은 Content가 채워지는 방법에 대한 코드는 아래와 같습니다.

    • flex-container부분에서는 메인축을 column(위아래)로 변경하고 컨테이너 크기를 100vh로 화면에 꽉차게 잡아줍니다.

    • content에 해당하는 2열에 flex-grow를 써서 Header와 Footer사이에 남는 공간을 꽉 차대 늘려줍니다. 다시 한번 강조하지만 flex-grow는 컨테이너의 크기만큼만 늘어납니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
	<style>
		.flex-container {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		.flex-item:nth-child(2) {
			flex-grow: 1;
		}

	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">Header</div>
		<div class="flex-item">Content</div>
		<div class="flex-item">Footer</div>
	</div>
</body>
</html>



🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Css 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)